Skip to content

Commit 5772e4c

Browse files
mishig25mishig25
authored
InferenceSnippet more styling (#552)
1 parent a33160c commit 5772e4c

File tree

5 files changed

+175
-31
lines changed

5 files changed

+175
-31
lines changed

‎kit/src/lib/Dropdown.svelte‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,20 @@
1414
export let selectedValue: string | undefined = undefined;
1515
export let useDeprecatedJS = true;
1616
export let withBtnCaret = false;
17+
export let dontCloseIds: string[] = [];
1718
1819
let element: HTMLElement | undefined = undefined;
1920
let isOpen = false;
21+
22+
function onClose(e: Event) {
23+
if (e.target) {
24+
const id = (e.target as HTMLElement).id;
25+
if (dontCloseIds.includes(id)) {
26+
return;
27+
}
28+
}
29+
isOpen = false;
30+
}
2031
</script>
2132

2233
<div class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}" bind:this={element}>
@@ -49,7 +60,7 @@
4960
classNames="{menuClassNames} {useDeprecatedJS ? 'v2-dropdown-menu hidden' : ''}"
5061
dropdownElement={element}
5162
forceAlignement={forceMenuAlignement}
52-
onClose={() => (isOpen = false)}
63+
{onClose}
5364
>
5465
<slot name="menu" />
5566
</DropdownMenu>

‎kit/src/lib/DropdownMenu.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
export let classNames = "";
77
export let dropdownElement: HTMLElement | undefined = undefined;
88
export let forceAlignement: Alignement | undefined = undefined;
9-
export let onClose: () => void;
9+
export let onClose: (e: MouseEvent) => void;
1010
1111
// MUST be set to left if forceAlignement is undefined or else
1212
// the browser won't be able to properly compute x and width
@@ -34,7 +34,7 @@
3434
// (prevent race condition with other click handlers)
3535
const targetElement = e.target as HTMLElement;
3636
if (targetElement !== dropdownElement && !dropdownElement?.contains(targetElement)) {
37-
onClose();
37+
onClose(e);
3838
}
3939
}
4040
</script>

‎kit/src/lib/InferenceSnippet/IconLinkExternal.svelte‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 12 12"
16+
fill="currentColor"
17+
>
18+
<path
19+
fill-rule="evenodd"
20+
clip-rule="evenodd"
21+
d="M7.5 1.75H9.75C9.88807 1.75 10 1.86193 10 2V4.25C10 4.38807 9.88807 4.5 9.75 4.5C9.61193 4.5 9.5 4.38807 9.5 4.25V2.60355L6.42678 5.67678C6.32915 5.77441 6.17085 5.77441 6.07322 5.67678C5.97559 5.57915 5.97559 5.42085 6.07322 5.32322L9.14645 2.25H7.5C7.36193 2.25 7.25 2.13807 7.25 2C7.25 1.86193 7.36193 1.75 7.5 1.75Z"
22+
fill="currentColor"
23+
/>
24+
<path
25+
fill-rule="evenodd"
26+
clip-rule="evenodd"
27+
d="M6 2.5C6 2.22386 5.77614 2 5.5 2H2.69388C2.50985 2 2.33336 2.07311 2.20323 2.20323C2.0731 2.33336 2 2.50986 2 2.69389V8.93885C2 9.12288 2.0731 9.29933 2.20323 9.42953C2.33336 9.55963 2.50985 9.63273 2.69388 9.63273H8.93884C9.12287 9.63273 9.29941 9.55963 9.42951 9.42953C9.55961 9.29933 9.63271 9.12288 9.63271 8.93885V6.5C9.63271 6.22386 9.40885 6 9.13271 6C8.85657 6 8.63271 6.22386 8.63271 6.5V8.63273H3V3H5.5C5.77614 3 6 2.77614 6 2.5Z"
28+
fill="currentColor"
29+
fill-opacity="0.3"
30+
/>
31+
</svg>

‎kit/src/lib/InferenceSnippet/IconSettings.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 9 7"
16+
>
17+
<path
18+
fill="currentColor"
19+
d="M8.537 1.153H7.361A1.445 1.445 0 0 0 5.954 0c-.689 0-1.263.49-1.407 1.153H.5v.576h4.047a1.445 1.445 0 0 0 1.407 1.153c.689 0 1.263-.49 1.407-1.153h1.176v-.576M5.954 2.305a.847.847 0 0 1-.861-.864c0-.49.373-.865.861-.865s.861.375.861.865-.373.864-.861.864M.5 5.764h1.177a1.445 1.445 0 0 0 1.406 1.152c.69 0 1.263-.49 1.407-1.152h4.047v-.577H4.49a1.445 1.445 0 0 0-1.407-1.152c-.688 0-1.263.49-1.406 1.152H.5v.577M3.083 4.61c.488 0 .862.375.862.864 0 .49-.374.865-.862.865a.847.847 0 0 1-.86-.865c0-.49.372-.864.86-.864"
20+
/>
21+
</svg>

‎kit/src/lib/InferenceSnippet/InferenceSnippet.svelte‎

Lines changed: 109 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
import IconInferenceTogetherAI from "./IconInferenceTogetherAI.svelte";
2828
import Dropdown from "$lib/Dropdown.svelte";
2929
import DropdownEntry from "$lib/DropdownEntry.svelte";
30+
import IconSettings from "./IconSettings.svelte";
31+
import IconLinkExternal from "./IconLinkExternal.svelte";
3032
3133
type InferenceProviderNotOpenAI = Exclude<InferenceProvider, "openai">;
3234
@@ -136,11 +138,13 @@
136138
});
137139
</script>
138140

139-
<div class="flex gap-x-2 text-sm not-prose flex-col md:flex-row">
141+
<div
142+
class="flex gap-x-2 justify-between md:items-center w-full text-sm not-prose flex-col md:flex-row"
143+
>
140144
<!-- Language selection -->
141145
{#if languages.length > 1}
142146
<div>
143-
<p class="font-mono text-sm opacity-50 hidden md:block">Language</p>
147+
<p class="font-mono text-xs opacity-50 hidden md:block">Language</p>
144148
<div class="my-1.5 flex items-center gap-x-1 gap-y-0.5 flex-wrap">
145149
{#each languages as language}
146150
<button
@@ -164,7 +168,7 @@
164168
<!-- Client selection -->
165169
{#if clients.length > 1}
166170
<div>
167-
<p class="font-mono text-sm opacity-50 hidden md:block">Client</p>
171+
<p class="font-mono text-xs opacity-50 hidden md:block">Client</p>
168172
<div class="my-1.5 flex items-center gap-x-1 gap-y-0.5 flex-wrap">
169173
{#each clients as client}
170174
<button
@@ -182,22 +186,11 @@
182186
</div>
183187
{/if}
184188

185-
<!-- Stream checkbox (unchanged) -->
186-
{#if model.tags.includes("conversational")}
187-
<div>
188-
<p class="font-mono text-sm opacity-50 hidden md:block">Stream</p>
189-
<div class="text-md group relative flex items-center self-start leading-tight my-1.5">
190-
<span class="mr-1 sm:block md:hidden">stream:</span>
191-
<input class="md:my-1 form-input not-prose" type="checkbox" bind:checked={streaming} />
192-
</div>
193-
</div>
194-
{/if}
195-
196189
<!-- Provider selection -->
197190
{#if providers.length > 0}
198191
{@const nVisibleProviders = 2}
199-
<div class="md:ml-auto md:pl-4">
200-
<p class="font-mono text-sm opacity-50 hidden md:block">Provider</p>
192+
<div>
193+
<p class="font-mono text-xs opacity-50 hidden md:block">Provider</p>
201194
<div class="my-1.5 flex items-center gap-x-1 gap-y-0.5 flex-wrap">
202195
{#each providers.slice(0, nVisibleProviders) as provider}
203196
<button
@@ -246,19 +239,107 @@
246239
</div>
247240
</div>
248241
{/if}
249-
</div>
250242

251-
<div class="not-prose text-sm gap-x-2 hidden md:flex">
252-
<a href="/settings/tokens" class="btn h-7 gap-1 px-1.5 py-0.5 md:px-2" title="Tokens settings">
253-
Manage tokens
254-
</a>
255-
<a
256-
href="/settings/inference-providers"
257-
class="btn h-7 gap-1 px-1.5 py-0.5 md:px-2"
258-
title="Inference providers settings"
259-
>
260-
Manage providers
261-
</a>
243+
<div class="flex not-prose my-1.5">
244+
<Dropdown
245+
btnLabel=""
246+
classNames="hidden md:block"
247+
noBtnClass
248+
useDeprecatedJS={false}
249+
forceMenuAlignement="right"
250+
dontCloseIds={["stream-checkbox"]}
251+
>
252+
<slot slot="button">
253+
<button class="btn h-7 gap-1 px-1.5 py-0.5 md:px-2" title="Settings dropdown">
254+
<IconSettings />
255+
Settings
256+
</button>
257+
</slot>
258+
<slot slot="menu">
259+
<div class="flex flex-col p-2 gap-y-2">
260+
{#if model.tags.includes("conversational")}
261+
<div
262+
class="text-md group relative flex items-center self-start leading-tight gap-x-2 border-b w-full pb-2"
263+
>
264+
<input
265+
class="form-input not-prose"
266+
type="checkbox"
267+
bind:checked={streaming}
268+
id="stream-checkbox"
269+
/>
270+
<span class="">Stream</span>
271+
</div>
272+
{/if}
273+
<a
274+
href="/settings/tokens"
275+
class="whitespace-nowrap flex gap-x-1 items-center"
276+
target="_blank"
277+
title="Tokens settings"
278+
>
279+
<IconLinkExternal /> Manage tokens
280+
</a>
281+
282+
<a
283+
href="/settings/inference-providers"
284+
class="whitespace-nowrap flex gap-x-1 items-center"
285+
title="Inference providers settings"
286+
target="_blank"
287+
>
288+
<IconLinkExternal /> Manage providers
289+
</a>
290+
</div>
291+
</slot>
292+
</Dropdown>
293+
<Dropdown
294+
classNames="md:hidden"
295+
noBtnClass
296+
useDeprecatedJS={false}
297+
forceMenuAlignement="left"
298+
dontCloseIds={["stream-checkbox"]}
299+
>
300+
<slot slot="button">
301+
<button class="btn h-7 gap-1 px-1.5 py-0.5 md:px-2" title="Settings dropdown">
302+
<IconSettings />
303+
Settings
304+
</button>
305+
</slot>
306+
<slot slot="menu">
307+
<div class="flex flex-col p-2 gap-y-2">
308+
{#if model.tags.includes("conversational")}
309+
<div
310+
class="text-md group relative flex items-center self-start leading-tight gap-x-2 border-b w-full pb-2"
311+
>
312+
<input
313+
class="form-input not-prose"
314+
type="checkbox"
315+
bind:checked={streaming}
316+
id="stream-checkbox"
317+
/>
318+
<span class="">Stream</span>
319+
</div>
320+
{/if}
321+
<a
322+
href="/settings/tokens"
323+
class="whitespace-nowrap flex gap-x-1 items-center"
324+
target="_blank"
325+
title="Tokens settings"
326+
>
327+
<IconLinkExternal /> Manage tokens
328+
</a>
329+
330+
<a
331+
href="/settings/inference-providers"
332+
class="whitespace-nowrap flex gap-x-1 items-center"
333+
title="Inference providers settings"
334+
target="_blank"
335+
>
336+
<IconLinkExternal /> Manage providers
337+
</a>
338+
</div>
339+
</slot>
340+
</Dropdown>
341+
<div class="flex-grow" />
342+
</div>
262343
</div>
263344

264345
{#if code}

0 commit comments

Comments
 (0)