Add HuggingChat menu option to CopyLLMTxtMenu (#677)

- Added HuggingChat option to the menu above ChatGPT
- Integrated IconHuggingChat component for the icon
- Set URL to open HuggingChat with page attachment and prompt
- Allows users to ask questions about the page in HuggingChat

Author: mishig25

kit/src/lib/CopyLLMTxtMenu.svelte

@@ -8,6 +8,7 @@
 	import IconOpenAI from "./IconOpenAI.svelte";
 	import IconAnthropic from "./IconAnthropic.svelte";
 	import IconMCP from "./IconMCP.svelte";
+	import IconHuggingChat from "./IconHuggingChat.svelte";
 
 	export let label = "Copy page";
 	export let markdownDescription = "Copy page as Markdown for LLMs";
@@ -39,11 +40,23 @@
 	type ExternalOption = {
 		label: string;
 		description: string;
-		icon: "chatgpt" | "claude" | "mcp";
+		icon: "chatgpt" | "claude" | "mcp" | "huggingchat";
 		buildUrl: () => string;
 	};
 
 	const externalOptions: ExternalOption[] = [
+		{
+			label: "Open in HuggingChat",
+			description: "Ask questions about this page",
+			icon: "huggingchat",
+			buildUrl: () => {
+				const encodedAttachment = encodeURIComponent(SOURCE_URL_MD);
+				const encodedPromptText = encodeURIComponent(
+					`Read from ${SOURCE_URL} so I can ask questions about it.`
+				);
+				return `https://huggingface.co/chat/?attachments=${encodedAttachment}&prompt=${encodedPromptText}`;
+			},
+		},
 		{
 			label: "Open in ChatGPT",
 			description: "Ask questions about this page",
@@ -299,7 +312,9 @@
 			{#each externalOptions as option}
 				<button role="menuitem" on:click={() => launchExternal(option)} class={baseMenuItemClass}>
 					<div class="border border-gray-200 dark:border-gray-850 rounded-lg p-1.5">
-						{#if option.icon === "chatgpt"}
+						{#if option.icon === "huggingchat"}
+							<IconHuggingChat classNames="w-4 h-4 shrink-0" />
+						{:else if option.icon === "chatgpt"}
 							<IconOpenAI classNames="w-4 h-4 shrink-0" />
 						{:else if option.icon === "claude"}
 							<IconAnthropic classNames="w-4 h-4 shrink-0" />

kit/src/lib/IconHuggingChat.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	width="1em"
+	height="1em"
+	viewBox="5 5 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<title>HuggingChat</title>
+	<path
+		d="M16.0006 25.9992C13.8266 25.999 11.7118 25.2901 9.97686 23.9799C8.2419 22.6698 6.98127 20.8298 6.38599 18.7388C5.79071 16.6478 5.89323 14.4198 6.678 12.3923C7.46278 10.3648 8.88705 8.64837 10.735 7.50308C12.5829 6.35779 14.7538 5.84606 16.9187 6.04544C19.0837 6.24481 21.1246 7.14442 22.7323 8.60795C24.34 10.0715 25.4268 12.0192 25.8281 14.1559C26.2293 16.2926 25.9232 18.5019 24.9561 20.449C24.7703 20.8042 24.7223 21.2155 24.8211 21.604L25.4211 23.8316C25.4803 24.0518 25.4805 24.2837 25.4216 24.5039C25.3627 24.7242 25.2468 24.925 25.0856 25.0862C24.9244 25.2474 24.7235 25.3633 24.5033 25.4222C24.283 25.4811 24.0512 25.4809 23.831 25.4217L21.6034 24.8217C21.2172 24.7248 20.809 24.7729 20.4558 24.9567C19.0683 25.6467 17.5457 26.0068 16.0006 26.0068V25.9992Z"
+		fill="black"
+	/>
+	<path
+		d="M9.62598 16.0013C9.62598 15.3799 10.1294 14.8765 10.7508 14.8765C11.3721 14.8765 11.8756 15.3799 11.8756 16.0013C11.8756 17.0953 12.3102 18.1448 13.0838 18.9184C13.8574 19.692 14.9069 20.1266 16.001 20.1267C17.095 20.1267 18.1445 19.692 18.9181 18.9184C19.6918 18.1448 20.1264 17.0953 20.1264 16.0013C20.1264 15.3799 20.6299 14.8765 21.2512 14.8765C21.8725 14.8765 22.3759 15.3799 22.3759 16.0013C22.3759 17.6921 21.7046 19.3137 20.509 20.5093C19.3134 21.7049 17.6918 22.3762 16.001 22.3762C14.3102 22.3762 12.6885 21.7049 11.4929 20.5093C10.2974 19.3137 9.62598 17.6921 9.62598 16.0013Z"
+		fill="white"
+	/>
+</svg>