Added domain filters text input

src/lib/components/WebSearchToggle.svelte

@@ -1,31 +1,50 @@
 <script lang="ts">
-	import { webSearchParameters } from "$lib/stores/webSearchParameters";
-	import CarbonInformation from "~icons/carbon/information";
-	import Switch from "./Switch.svelte";
+    import { webSearchParameters } from "$lib/stores/webSearchParameters";
+    import CarbonInformation from "~icons/carbon/information";
+    import Switch from "./Switch.svelte";
+
+    const toggle = () => {$webSearchParameters.useSearch = !$webSearchParameters.useSearch;};
+
+    let domainFilters = $webSearchParameters.domainFilters;
+
+    const updateDomainFilters = () => {
+        $webSearchParameters.domainFilters = domainFilters;
+    };
 
-	const toggle = () => ($webSearchParameters.useSearch = !$webSearchParameters.useSearch);
 </script>
 
-<div
-	class="flex h-9 cursor-pointer select-none items-center gap-2 rounded-xl border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
-	on:click={toggle}
-	on:keypress={toggle}
-	aria-checked={$webSearchParameters.useSearch}
-	aria-label="web search toggle"
-	role="switch"
-	tabindex="0"
->
-	<Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keypress />
-	<div class="whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Search web</div>
-	<div class="group relative w-max">
-		<CarbonInformation class="text-xs text-gray-500" />
-		<div
-			class="pointer-events-none absolute -top-20 left-1/2 w-max -translate-x-1/2 rounded-md bg-gray-100 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-800"
-		>
-			<p class="max-w-sm text-sm text-gray-800 dark:text-gray-200">
-				When enabled, the model will try to complement its answer with information queried from the
-				web.
-			</p>
-		</div>
-	</div>
-</div>
+<div class="flex flex-col gap-4">
+    <div
+        class="flex h-9 cursor-pointer select-none items-center gap-2 rounded-xl border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
+        on:click={toggle}
+        on:keypress={toggle}
+    >
+        <Switch name="useSearch" bind:checked={$webSearchParameters.useSearch} on:click on:keypress />
+        <div class="whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Search web</div>
+        <div class="group relative w-max">
+            <CarbonInformation class="text-xs text-gray-500" />
+            <div
+                class="pointer-events-none absolute -top-20 left-1/2 w-max -translate-x-1/2 rounded-md bg-gray-100 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-800"
+            >
+                <p class="max-w-sm text-sm text-gray-800 dark:text-gray-200">
+                    When enabled, the model will try to complement its answer with information queried from the
+                    web.
+                </p>
+            </div>
+        </div>
+    </div>
+    {#if $webSearchParameters.useSearch}
+        <div class="flex items-center gap-2">
+            <label for="domainFilters" class="text-sm text-gray-800 dark:text-gray-200">(Optional) limit search to :</label>
+            <input
+                type="text"
+                id="domainFilters"
+                name="domainFilters"
+                bind:value={domainFilters}
+                class="border rounded-md p-2"
+                placeholder="e.g. hf.co, github.com"
+                on:input={updateDomainFilters}
+            />
+        </div>
+    {/if}
+</div>