Improve CodeSnipetts.svelte (#16)

src/lib/components/CodeSnippets.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 	import hljs from 'highlight.js/lib/core';
 	import javascript from 'highlight.js/lib/languages/javascript';
 	import python from 'highlight.js/lib/languages/python';
 	import bash from 'highlight.js/lib/languages/bash';
+	import type { Conversation } from '$lib/types';
 
-	export let model: string;
-	export let streaming: Boolean;
-	export let temperature: number;
-	export let maxTokens: number;
-	export let messages: ChatCompletionInputMessage[];
+	export let conversation: Conversation;
 
 	type Langauge = 'javascript' | 'python' | 'bash';
+	interface Snippet {
+		label: string;
+		code: string;
+	}
 
 	hljs.registerLanguage('javascript', javascript);
 	hljs.registerLanguage('python', python);
@@ -21,35 +21,51 @@
 		return hljs.highlight(code, { language }).value;
 	}
 
-	const npmSnippet = `import { HfInference } from '@huggingface/inference'
+	function getJavascriptSnippets() {
+		const snippets: Snippet[] = [];
+		snippets.push({
+			label: 'Install',
+			code: `import { HfInference } from '@huggingface/inference'
 
-const hf = new HfInference('your access token')`;
-
-	$: nonStreamingSnippet = `await hf.chatCompletion({
-  model: "${model}",
-  messages: [
-    { role: "user", content: "Complete the this sentence with words one plus one is equal " }
-  ], 
-  max_tokens: ${maxTokens},
-  temperature: ${temperature},
-  seed: 0,
-});`;
-
-	$: streamingSnippet = `let out = "";
+const hf = new HfInference('your access token')`
+		});
+		if (conversation.config.streaming) {
+			snippets.push({
+				label: 'Streaming API',
+				code: `let out = "";
 
 for await (const chunk of hf.chatCompletionStream({
-  model: "${model}",
+  model: "${conversation.model}",
   messages: [
     { role: "user", content: "Complete the equation 1+1= ,just the answer" }, 
   ],
-  max_tokens: ${maxTokens}, 
-  temperature: ${temperature},
+  max_tokens: ${conversation.config.maxTokens}, 
+  temperature: ${conversation.config.temperature},
   seed: 0,
 })) {
   if (chunk.choices && chunk.choices.length > 0) {
     out += chunk.choices[0].delta.content;
   }  
-}`;
+}`
+			});
+		} else {
+			// non-streaming
+			snippets.push({
+				label: 'Non-Streaming API',
+				code: `await hf.chatCompletion({
+  model: "${conversation.model}",
+  messages: [
+    { role: "user", content: "Complete the this sentence with words one plus one is equal " }
+  ], 
+  max_tokens: ${conversation.config.maxTokens},
+  temperature: ${conversation.config.temperature},
+  seed: 0,
+});`
+			});
+		}
+
+		return snippets;
+	}
 </script>
 
 <div class="px-2 pt-2">
@@ -74,23 +90,14 @@ for await (const chunk of hf.chatCompletionStream({
 		</ul>
 	</div>
 
-	<div class="px-4 pb-4 pt-6">
-		<h2 class="font-semibold">Install and instantiate</h2>
-	</div>
-	<pre
-		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
-			npmSnippet,
-			'javascript'
-		)}</pre>
-
-	<div class="px-4 pb-4 pt-6">
-		<h2 class="font-semibold">{streaming ? 'Streaming API' : 'Non-Streaming API'}</h2>
-	</div>
-
-	<pre
-		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
-			streaming ? streamingSnippet : nonStreamingSnippet,
-			'javascript'
-		)}
-  </pre>
+	{#each getJavascriptSnippets() as { label, code }}
+		<div class="px-4 pb-4 pt-6">
+			<h2 class="font-semibold">{label}</h2>
+		</div>
+		<pre
+			class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
+				code,
+				'javascript'
+			)}</pre>
+	{/each}
 </div>

src/lib/components/Conversation.svelte

@@ -103,6 +103,6 @@
 			</div>
 		</button>
 	{:else}
-		<CodeSnippets {...conversation} {...conversation.config} />
+		<CodeSnippets {conversation} />
 	{/if}
 </div>