File size: 3,140 Bytes
693ced9 9b4caaa 3df1e9f c6f83f5 3df1e9f 058d10c 693ced9 936176c 693ced9 c6f83f5 3df1e9f 9b4caaa 3df1e9f 058d10c 3df1e9f a5619c2 3df1e9f 9b4caaa 3df1e9f 19d1d46 3df1e9f c6f83f5 3df1e9f 693ced9 c6f83f5 693ced9 3df1e9f c6f83f5 693ced9 3df1e9f 936176c 3df1e9f 693ced9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<script lang="ts">
import { dev } from "$app/environment";
import { session } from "$lib/state/session.svelte.js";
import { token } from "$lib/state/token.svelte.js";
import { compareStr } from "$lib/utils/compare.js";
import { Popover } from "melt/builders";
import { prompt } from "./prompts.svelte";
import { showQuotaModal } from "./quota-modal.svelte";
import type { ToastData } from "./toaster.svelte.js";
import { addToast } from "./toaster.svelte.js";
import { models } from "$lib/state/models.svelte";
let innerWidth = $state<number>();
let innerHeight = $state<number>();
function toggleTheme() {
document.body.classList.toggle("dark");
}
const popover = new Popover();
type Action = {
label: string;
cb: () => void;
};
const actions: Action[] = [
{ label: "Toggle Theme", cb: toggleTheme },
{
label: "Log session to console",
cb: () => {
console.log(session.$);
},
},
{
label: "Log models to console",
cb: () => {
console.log(models.all);
},
},
{
label: "Test prompt",
cb: async () => {
console.log(await prompt("Test prompt"));
},
},
{
label: "Show quota modal",
cb: () => {
showQuotaModal();
},
},
{
label: "Show token modal",
cb: () => {
token.showModal = true;
},
},
{
label: "Test toast",
cb: () => {
const toastData: ToastData[] = [
{
title: "Success",
description: "Congratulations! It worked!",
variant: "success",
},
{
title: "Warning",
description: "Please check again.",
variant: "warning",
},
{
title: "Error",
description: "Something did not work!",
variant: "error",
},
{
title: "Big one",
description:
"This one has a lot of text. like seriously. its a lot. so this toast should be really big! and we see how that affects the other ones. ",
variant: "success",
},
];
addToast(toastData[Math.floor(Math.random() * toastData.length)]!);
},
},
].toSorted((a, b) => compareStr(a.label, b.label));
</script>
<svelte:window bind:innerWidth bind:innerHeight />
{#if dev}
<div class="abs-x-center fixed bottom-0 z-50">
<button class="rounded-t-md bg-gray-500 px-3 py-1 text-xs text-white hover:bg-gray-600" {...popover.trigger}>
Debug
</button>
<div
class="mb-2 w-128 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
{...popover.content}
>
<h3 class="mb-3 text-lg font-semibold dark:text-white">Debug Menu</h3>
<div class="space-y-3">
<div class="text-sm dark:text-gray-300">
<p>Viewport: {innerWidth}x{innerHeight}</p>
<p>Environment: {import.meta.env.MODE}</p>
</div>
<div class="grid grid-cols-2 gap-2">
{#each actions as { label, cb }}
<button
class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
onclick={cb}
>
{label}
</button>
{/each}
</div>
</div>
</div>
</div>
{/if}
<style>
/* Add any additional styles here */
</style>
|