api instructions

src/lib/components/chat/User.svelte

@@ -14,13 +14,12 @@
 	import { onMount } from 'svelte';
 
 	import ErrorMessage from '$lib/components/error/Error.svelte';
-	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
+	import type { ChatMessage } from '$lib/helpers/types';
 	import { Button } from '$lib/components/ui/button';
 	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
 	import Message from './Message.svelte';
-	import SettingsModel from '$lib/components/model/SettingsModel.svelte';
-	import { MAX_MODELS_PER_NODE, MAX_SUGGESTIONS } from '$lib';
+	import { MAX_SUGGESTIONS } from '$lib';
 	import { triggerAiCall } from '$lib/chat';
 	import { SUGGESTIONS_PROMPT } from '$lib/consts';
 	import { authState } from '$lib/state/auth.svelte';

src/lib/components/chat/markdown/Code.svelte

@@ -1,13 +1,25 @@
 <script lang="ts">
 	import Button from '$lib/components/ui/button/button.svelte';
-	import { Copy } from '@lucide/svelte';
+	import { Check, Copy } from '@lucide/svelte';
 	import { HighlightAuto } from 'svelte-highlight';
 	import 'svelte-highlight/styles/github.css';
 
-	let { lang, text }: { lang?: string; text: string } = $props();
+	let {
+		lang,
+		text,
+		className = 'my-3 relative rounded-lg border border-border/60 bg-muted/50'
+	}: { lang?: string; text: string; className?: string } = $props();
+
+	let copiedCode = $state(false);
+
+	async function copy(text: string) {
+		await navigator.clipboard.writeText(text);
+		copiedCode = true;
+		setTimeout(() => (copiedCode = false), 2000);
+	}
 </script>
 
-<div class="relative my-3 overflow-hidden rounded-lg border border-border/60 bg-muted/50">
+<div class="overflow-hidden {className}">
 	{#if lang}
 		<div class="flex items-center justify-between border-b border-border/60 bg-muted px-3 py-1.5">
 			<span class="font-mono text-[11px] text-muted-foreground">{lang}</span>
@@ -17,10 +29,15 @@
 		<HighlightAuto code={text} class="font-mono text-[13px] leading-relaxed" />
 		<Button
 			variant="outline"
-			size="icon-xs"
 			class="absolute top-2 right-2 opacity-0 group-hover:opacity-100"
+			size="icon-xs"
+			onclick={() => copy(text)}
 		>
-			<Copy />
+			{#if copiedCode}
+				<Check class="size-3.5 text-green-500" />
+			{:else}
+				<Copy class="size-3.5" />
+			{/if}
 		</Button>
 	</div>
 </div>

src/lib/components/flow/actions/InstructionsModal.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import { CodeXml, ExternalLink } from '@lucide/svelte';
+
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/sheet/index.js';
+	import Code from '$lib/components/chat/markdown/Code.svelte';
+	import { useSvelteFlow } from '@xyflow/svelte';
+
+	type Instruction = {
+		library: string;
+		doc_link: string;
+		install: string;
+		code: string;
+	};
+
+	type Language = {
+		language: string;
+		instructions: Instruction[];
+	};
+
+	const { getNodes } = useSvelteFlow();
+
+	const instructions: Language[] = [
+		{
+			language: 'JavaScript',
+			instructions: [
+				{
+					library: 'openai',
+					doc_link: 'https://platform.openai.com/docs/libraries',
+					install: 'npm install openai',
+					code: `import OpenAI from "openai";
+
+const client = new OpenAI({
+  baseURL: "https://router.huggingface.co/v1",
+  apiKey: process.env.HF_TOKEN,
+});
+
+const stream = client.chat.completions.stream({
+  model: "meta-llama/Llama-3.1-8B-Instruct",
+  messages: [{ role: "user", content: "What is the capital of France?" }],
+  stream: true,
+});
+
+for await (const chunk of stream) {
+  process.stdout.write(chunk.choices[0]?.delta?.content || "");
+}`
+				},
+				{
+					library: 'huggingface.js',
+					doc_link: 'https://huggingface.co/docs/huggingface.js/inference/README',
+					install: 'npm install @huggingface/inference',
+					code: `import { InferenceClient } from "@huggingface/inference";
+
+const client = new InferenceClient(process.env.HF_TOKEN);
+
+let output = "";
+for await (const chunk of client.chatCompletionStream({
+  model: "meta-llama/Llama-3.1-8B-Instruct",
+  messages: [{ role: "user", content: "What is the capital of France?" }],
+  max_tokens: 512,
+})) {
+  output += chunk.choices[0].delta.content;
+}
+console.log(output);`
+				}
+			]
+		},
+		{
+			language: 'Python',
+			instructions: [
+				{
+					library: 'openai',
+					doc_link: 'https://platform.openai.com/docs/libraries',
+					install: 'pip install --upgrade openai',
+					code: `import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://router.huggingface.co/v1",
+    api_key=os.environ.get("HF_TOKEN"),
+)
+
+stream = client.chat.completions.create(
+    model="meta-llama/Llama-3.1-8B-Instruct",
+    messages=[{"role": "user", "content": "What is the capital of France?"}],
+    stream=True,
+)
+for chunk in stream:
+    print(chunk.choices[0].delta.content, end="", flush=True)`
+				},
+				{
+					library: 'huggingface_hub',
+					doc_link: 'https://huggingface.co/docs/huggingface_hub/guides/inference',
+					install: 'pip install --upgrade huggingface_hub',
+					code: `import os
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(
+    provider="auto",
+    api_key=os.environ.get("HF_TOKEN"),
+)
+
+for message in client.chat_completion(
+    model="meta-llama/Llama-3.1-8B-Instruct",
+    messages=[{"role": "user", "content": "What is the capital of France?"}],
+    max_tokens=500,
+    stream=True,
+):
+    print(message.choices[0].delta.content, end="")`
+				},
+				{
+					library: 'requests',
+					doc_link: 'https://requests.readthedocs.io/en/latest/',
+					install: 'pip install requests',
+					code: `import os
+import json
+import requests
+
+API_URL = "https://router.huggingface.co/v1/chat/completions"
+headers = {"Authorization": f"Bearer {os.environ['HF_TOKEN']}"}
+
+def query(payload):
+    response = requests.post(API_URL, headers=headers, json=payload, stream=True)
+    for line in response.iter_lines():
+        if not line.startswith(b"data:"):
+            continue
+        if line.strip() == b"data: [DONE]":
+            return
+        yield json.loads(line.decode("utf-8").lstrip("data:"))
+
+chunks = query({
+    "messages": [{"role": "user", "content": "What is the capital of France?"}],
+    "temperature": 0.5,
+    "top_p": 0.7,
+    "model": "meta-llama/Llama-3.1-8B-Instruct",
+    "stream": True,
+})
+for chunk in chunks:
+    print(chunk["choices"][0]["delta"]["content"], end="")`
+				}
+			]
+		},
+		{
+			language: 'cURL',
+			instructions: [
+				{
+					library: 'curl',
+					doc_link: 'https://huggingface.co/docs/api-inference/getting-started',
+					install: '',
+					code: `curl https://router.huggingface.co/v1/chat/completions \\
+  -H "Authorization: Bearer $HF_TOKEN" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "meta-llama/Llama-3.1-8B-Instruct",
+    "messages": [
+      { "role": "user", "content": "What is the capital of France?" }
+    ],
+    "stream": true
+  }'`
+				}
+			]
+		}
+	];
+
+	let open = $state(false);
+	let selectedLanguage = $state<string>(instructions[0].language);
+	let selectedLibrary = $state<string>(instructions[0].instructions[0].library);
+
+	let languageData = $derived(instructions.find((i) => i.language === selectedLanguage));
+	let libraryData = $derived(languageData?.instructions.find((i) => i.library === selectedLibrary));
+	let showLibraryTabs = $derived((languageData?.instructions.length ?? 0) > 1);
+
+	// let nodeInformation = $derived(getNodes()[getNodes().length - 1]?.data ?? null);
+	// let modelInformation = $derived(
+	// 	modelsState.models.find(
+	// 		(m) =>
+	// 			m.id === (nodeInformation?.selectedModel as string) ||
+	// 			m.id === (nodeInformation?.selectedModels as string[])[0]
+	// 	)
+	// );
+
+	function selectLanguage(lang: string) {
+		selectedLanguage = lang;
+		const langData = instructions.find((i) => i.language === lang);
+		if (langData) selectedLibrary = langData.instructions[0].library;
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Trigger class="">
+		<Button variant="outline">
+			<CodeXml />
+			How to use the API
+		</Button>
+	</Dialog.Trigger>
+
+	<Dialog.Content class="max-w-xl! gap-0! p-0!">
+		<Dialog.Header class="mb-0 gap-1! rounded-none border-b p-5">
+			<Dialog.Title>Use the API</Dialog.Title>
+			<Dialog.Description>Integrate this model into your application.</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-4 p-5">
+			<div class="flex items-center gap-1.5">
+				{#each instructions as lang}
+					<Button
+						variant={selectedLanguage === lang.language ? 'default' : 'outline'}
+						size="default"
+						onclick={() => selectLanguage(lang.language)}
+					>
+						{lang.language}
+					</Button>
+				{/each}
+			</div>
+
+			{#if showLibraryTabs && languageData}
+				<div class="flex items-center gap-1.5">
+					{#each languageData.instructions as instr}
+						<Button
+							variant={selectedLibrary === instr.library ? 'outline-blue' : 'outline'}
+							size="xs"
+							class="rounded-full!"
+							onclick={() => (selectedLibrary = instr.library)}
+						>
+							{instr.library}
+						</Button>
+					{/each}
+				</div>
+			{/if}
+
+			{#if libraryData}
+				{#if libraryData.install}
+					<div class="overflow-hidden rounded-lg border border-border">
+						<div class="flex items-center justify-between border-b border-border px-3.5 py-2.5">
+							<p class="text-xs font-semibold text-primary">Install</p>
+						</div>
+						<Code text={libraryData.install} className="" />
+					</div>
+				{/if}
+
+				<div class="overflow-hidden rounded-lg border border-border">
+					<div class="flex items-center justify-between border-b border-border px-3.5 py-2.5">
+						<p class="text-xs font-semibold text-primary">Streaming API</p>
+						<div class="flex items-center gap-1.5">
+							<a href={libraryData.doc_link} target="_blank" rel="noopener noreferrer">
+								<Button variant="outline" size="2xs">
+									<ExternalLink class="size-3.5" />
+									View documentation
+								</Button>
+							</a>
+						</div>
+					</div>
+					<Code text={libraryData.code} className="" />
+				</div>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/flow/actions/PanelRightActions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Contrast, CreditCard, Monitor, Moon, RefreshCcw, Sun } from '@lucide/svelte';
-	import { Panel, useNodes, useSvelteFlow } from '@xyflow/svelte';
+	import { Panel, useSvelteFlow } from '@xyflow/svelte';
 	import { setMode } from 'mode-watcher';
 
 	import { Button } from '$lib/components/ui/button';
@@ -9,6 +9,7 @@
 	import { billingModalState } from '$lib/state/billing-modal.svelte';
 	import defaultAvatar from '$lib/assets/default-avatar.svg';
 	import BillingManagementModal from '$lib/components/billing/BillingManagementModal.svelte';
+	import InstructionsModal from './InstructionsModal.svelte';
 
 	let { canReset }: { canReset: boolean } = $props();
 
@@ -31,6 +32,7 @@
 			Start new chat
 		</Button>
 	{/if}
+	<InstructionsModal />
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger>
 			{#snippet child({ props })}

src/lib/components/ui/button/button.svelte

@@ -4,7 +4,7 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring cursor-pointer focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		base: "focus-visible:border-ring cursor-pointer border border-border focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
 				default:
@@ -16,7 +16,8 @@
 				outline:
 					'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-gray-900/70 dark:border-border dark:hover:bg-gray-800/70 border shadow-xs text-gray-600 dark:text-gray-400',
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				ghost:
+					'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 border-transparent!',
 				link: 'text-primary underline-offset-4 hover:underline',
 				'outline-blue':
 					'bg-blue-500/10 text-blue-500 border border-blue-500/20 hover:bg-blue-500/20 shadow-xs',

src/routes/+page.svelte

@@ -14,7 +14,6 @@
 	import { modelsState } from '$lib/state/models.svelte';
 	import User from '$lib/components/chat/User.svelte';
 	import Assistant from '$lib/components/chat/Assistant.svelte';
-	import type { ChatModel } from '$lib/helpers/types';
 	import FitViewOnResize from '$lib/components/flow/FitViewOnResize.svelte';
 	import PanelRightActions from '$lib/components/flow/actions/PanelRightActions.svelte';
 	import { MAX_DEFAULT_MODELS } from '$lib';
@@ -22,7 +21,6 @@
 	import { viewState } from '$lib/state/view.svelte';
 	import ContextMenuComponent from '$lib/components/flow/actions/ContextMenu.svelte';
 	import { getNodesAssociatedWith } from '$lib/helpers/getNodesAssociatedWith';
-	import PanelLeftMenu from '$lib/components/flow/actions/PanelLeftMenu.svelte';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	const nodeTypes = {