view docs + close from top

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -344,6 +344,7 @@
 						{compareActive}
 						on:addMessage={() => addMessage(conversationIdx)}
 						on:deleteMessage={e => deleteMessage(conversationIdx, e.detail)}
+						on:closeCode={() => (viewCode = false)}
 					/>
 				</div>
 			{/each}
@@ -490,14 +491,25 @@
 	{/if}
 </div>
 
-<a
-	target="_blank"
-	href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/1"
-	class="absolute bottom-6 left-4 flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 max-md:hidden dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
->
-	<IconInfo classNames="text-xs" />
-	Give feedback
-</a>
+<div class="absolute bottom-6 left-4 flex items-center gap-2 max-md:hidden">
+	<a
+		target="_blank"
+		href="https://huggingface.co/docs/api-inference/tasks/chat-completion"
+		class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+	>
+		<IconInfo classNames="text-xs" />
+		View Docs
+	</a>
+	<span class="dark:text-gray-500">·</span>
+	<a
+		target="_blank"
+		href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/1"
+		class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+	>
+		Give feedback
+	</a>
+</div>
+
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
 		{models}

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Conversation } from "./types";
 
-	import { onDestroy } from "svelte";
+	import { createEventDispatcher, onDestroy } from "svelte";
 	import hljs from "highlight.js/lib/core";
 	import javascript from "highlight.js/lib/languages/javascript";
 	import python from "highlight.js/lib/languages/python";
@@ -17,6 +17,8 @@
 	export let conversation: Conversation;
 	export let hfToken: string;
 
+	const dispatch = createEventDispatcher<{ closeCode: void }>();
+
 	const lanuages = ["javascript", "python", "http"];
 	type Language = (typeof lanuages)[number];
 	const labelsByLanguage: Record<Language, string> = {
@@ -452,6 +454,16 @@ print(completion.choices[0].message)`,
 					>
 				</li>
 			{/each}
+			<li class="ml-auto self-center max-sm:hidden">
+				<button
+					on:click={() => {
+						dispatch("closeCode");
+					}}
+					class="flex size-7 items-center justify-center rounded-lg px-3 py-2.5 text-xs font-medium text-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+				>
+					✕
+				</button>
+			</li>
 		</ul>
 	</div>
 

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -101,6 +101,6 @@
 			</div>
 		</button>
 	{:else}
-		<CodeSnippets {conversation} {hfToken} />
+		<CodeSnippets {conversation} {hfToken} on:closeCode />
 	{/if}
 </div>