change casing

src/lib/components/{DebugMenu.svelte → debug-menu.svelte}

@@ -2,7 +2,7 @@
 	import { dev } from "$app/environment";
 	import { session } from "$lib/stores/session.js";
 	import { createPopover } from "@melt-ui/svelte";
-	import { prompt } from "./Prompts.svelte";
+	import { prompt } from "./prompts.svelte";
 	import { token } from "$lib/stores/token.js";
 	import { compareStr } from "$lib/utils/compare.js";
 	import type { ToastData } from "./toaster.svelte.js";
@@ -65,10 +65,10 @@
 					},
 				];
 
-				addToast({
+				addToast(
 					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					data: toastData[Math.floor(Math.random() * toastData.length)]!,
-				});
+					toastData[Math.floor(Math.random() * toastData.length)]!
+				);
 			},
 		},
 	].toSorted((a, b) => compareStr(a.label, b.label));

src/lib/components/{InferencePlayground/InferencePlaygroundCodeSnippets.svelte → inference-playground/code-snippets.svelte}

@@ -12,11 +12,7 @@
 	import type { InferenceProvider } from "@huggingface/inference";
 	import IconCopyCode from "~icons/carbon/copy";
 	import IconExternal from "~icons/carbon/arrow-up-right";
-	import {
-		getInferenceSnippet,
-		type GetInferenceSnippetReturn,
-		type InferenceSnippetLanguage,
-	} from "./inferencePlaygroundUtils.js";
+	import { getInferenceSnippet, type GetInferenceSnippetReturn, type InferenceSnippetLanguage } from "./utils.js";
 
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);

src/lib/components/{InferencePlayground/InferencePlaygroundConversationHeader.svelte → inference-playground/conversation-header.svelte}

@@ -4,10 +4,10 @@
 	import { createEventDispatcher } from "svelte";
 
 	import { models } from "$lib/stores/models.js";
-	import Avatar from "../Avatar.svelte";
+	import Avatar from "../avatar.svelte";
 	import IconCog from "~icons/carbon/settings";
-	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
-	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
+	import GenerationConfig from "./generation-config.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ProviderSelect from "./provider-select.svelte";
 
 	export let conversation: Conversation;

src/lib/components/{InferencePlayground/InferencePlaygroundConversation.svelte → inference-playground/conversation.svelte}

@@ -4,7 +4,7 @@
 	import type { Conversation } from "$lib/types.js";
 
 	import IconPlus from "~icons/carbon/add";
-	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
+	import CodeSnippets from "./code-snippets.svelte";
 	import Message from "./message.svelte";
 
 	interface Props {

src/lib/components/{InferencePlayground/InferencePlaygroundGenerationConfig.svelte → inference-playground/generation-config.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Conversation } from "$lib/types.js";
 
-	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generationConfigSettings.js";
-	import { customMaxTokens } from "./inferencePlaygroundUtils.js";
+	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
+	import { customMaxTokens } from "./utils.js";
 
 	export let conversation: Conversation;
 	export let classNames = "";

src/lib/components/{InferencePlayground/InferencePlaygroundModelSelector.svelte → inference-playground/model-selector.svelte}

@@ -3,10 +3,10 @@
 
 	import { models } from "$lib/stores/models.js";
 	import IconCaret from "~icons/carbon/chevron-down";
-	import Avatar from "../Avatar.svelte";
-	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
+	import Avatar from "../avatar.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ProviderSelect from "./provider-select.svelte";
-	import { defaultSystemMessage } from "./inferencePlaygroundUtils.js";
+	import { defaultSystemMessage } from "./utils.js";
 
 	export let conversation: Conversation;
 

src/lib/components/{InferencePlayground/InferencePlayground.svelte → inference-playground/playground.svelte}

@@ -1,11 +1,7 @@
 <script lang="ts">
 	import type { Conversation, ConversationMessage, ModelWithTokenizer } from "$lib/types.js";
 
-	import {
-		handleNonStreamingResponse,
-		handleStreamingResponse,
-		isSystemPromptSupported,
-	} from "./inferencePlaygroundUtils.js";
+	import { handleNonStreamingResponse, handleStreamingResponse, isSystemPromptSupported } from "./utils.js";
 
 	import { models } from "$lib/stores/models.js";
 	import { project, session } from "$lib/stores/session.js";
@@ -18,13 +14,13 @@
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
 	import { default as IconDelete, default as IconThrashcan } from "~icons/carbon/trash-can";
-	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
-	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
-	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
-	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
-	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
-	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import InferencePlaygroundProjectSelect from "./InferencePlaygroundProjectSelect.svelte";
+	import PlaygroundConversation from "./conversation.svelte";
+	import PlaygroundConversationHeader from "./conversation-header.svelte";
+	import GenerationConfig from "./generation-config.svelte";
+	import HFTokenModal from "./hf-token-modal.svelte";
+	import ModelSelector from "./model-selector.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
+	import ProjectSelect from "./project-select.svelte";
 	import { addToast } from "../toaster.svelte.js";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
@@ -221,7 +217,7 @@
 >
 	<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
 		<div class="pl-2">
-			<InferencePlaygroundProjectSelect />
+			<ProjectSelect />
 		</div>
 		<div
 			class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-r-xl border-x border-y border-gray-200/80 bg-linear-to-b from-white via-white p-3 shadow-xs max-md:rounded-xl dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"

src/lib/components/{InferencePlayground/InferencePlaygroundProjectSelect.svelte → inference-playground/project-select.svelte}

@@ -7,7 +7,7 @@
 	import IconEdit from "~icons/carbon/edit";
 	import IconSave from "~icons/carbon/save";
 	import IconDelete from "~icons/carbon/trash-can";
-	import { prompt } from "../Prompts.svelte";
+	import { prompt } from "../prompts.svelte";
 
 	interface Props {
 		class?: string;

src/lib/components/{InferencePlayground → inference-playground}/provider-select.svelte

@@ -5,7 +5,7 @@
 	import { cn } from "$lib/utils/cn.js";
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "~icons/carbon/chevron-down";
-	import IconProvider from "../Icons/IconProvider.svelte";
+	import IconProvider from "../icons/icon-provider.svelte";
 
 	export let conversation: Conversation;
 	let classes: string | undefined = undefined;

src/lib/stores/session.ts

@@ -1,4 +1,4 @@
-import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings.js";
+import { defaultGenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
 import { models } from "$lib/stores/models.js";
 import {
 	PipelineTag,

src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings.js";
+import type { GenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
 export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };

src/lib/utils/effect.ts

@@ -1,51 +0,0 @@
-import type { Stores, StoresValues } from "svelte/store";
-import { derived } from "svelte/store";
-import { safeOnDestroy } from "./lifecycle.js";
-import { noop } from "./noop.js";
-
-type EffectOptions = {
-	/**
-	 * Whether to skip the first run
-	 * @default undefined
-	 */
-	skipFirstRun?: boolean;
-};
-
-/**
- * A utility function that creates an effect from a set of stores and a function.
- * The effect is automatically cleaned up when the component is destroyed.
- *
- * @template S - The type of the stores object
- * @param stores - The stores object to derive from
- * @param fn - The function to run when the stores change
- * @param opts {@link EffectOptions}
- * @returns A function that can be used to unsubscribe the effect
- */
-export function effect<S extends Stores>(
-	stores: S,
-	fn: (values: StoresValues<S>) => (() => void) | void,
-	opts: EffectOptions = {}
-): () => void {
-	const { skipFirstRun } = opts;
-	let isFirstRun = true;
-	let cb: (() => void) | void = undefined;
-
-	// Create a derived store that contains the stores object and an onUnsubscribe function
-	const destroy = derived(stores, stores => {
-		cb?.();
-		if (isFirstRun && skipFirstRun) {
-			isFirstRun = false;
-		} else {
-			cb = fn(stores);
-		}
-	}).subscribe(noop);
-
-	const unsub = () => {
-		destroy();
-		cb?.();
-	};
-
-	// Automatically unsubscribe the effect when the component is destroyed
-	safeOnDestroy(unsub);
-	return unsub;
-}

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import "../app.css";
-	import DebugMenu from "$lib/components/DebugMenu.svelte";
-	import Prompts from "$lib/components/Prompts.svelte";
+	import DebugMenu from "$lib/components/debug-menu.svelte";
+	import Prompts from "$lib/components/prompts.svelte";
 	import Toaster from "$lib/components/toaster.svelte";
 </script>
 

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
+	import Playground from "$lib/components/inference-playground/playground.svelte";
 </script>
 
-<InferencePlayground />
+<Playground />