feat: rework example layout to work better on mobile

.env

@@ -35,13 +35,13 @@ MODELS=`[
       "description": "Nous Research's latest Hermes 3 release in 8B size.",
       "promptExamples": [
         {
-          "title": "Write an email from bullet list",
+          "title": "Write an email",
           "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
         }, {
-          "title": "Code a snake game",
+          "title": "Code a game",
           "prompt": "Code a basic snake game in python, give explanations for each step."
         }, {
-          "title": "Assist in a task",
+          "title": "Recipe help",
           "prompt": "How do I make a delicious lemon cheesecake?"
         }
       ]

README.md

@@ -282,13 +282,13 @@ MODELS=`[
     },
     "promptExamples": [
       {
-        "title": "Write an email from bullet list",
+        "title": "Write an email",
         "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
       }, {
-        "title": "Code a snake game",
+        "title": "Code a game",
         "prompt": "Code a basic snake game in python, give explanations for each step."
       }, {
-        "title": "Assist in a task",
+        "title": "Recipe help",
         "prompt": "How do I make a delicious lemon cheesecake?"
       }
     ]

chart/env/prod.yaml

@@ -62,15 +62,15 @@ envVars:
         },
         "promptExamples": [
           {
-            "title": "Write an email from bullet list",
+            "title": "Write an email",
             "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           },
           {
-            "title": "Assist in a task",
+            "title": "Recipe help",
             "prompt": "How do I make a delicious lemon cheesecake?"
           }
         ]
@@ -91,15 +91,15 @@ envVars:
         "tools": true,
         "promptExamples": [
           {
-            "title": "Write an email from bullet list",
+            "title": "Write an email",
             "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           },
           {
-            "title": "Assist in a task",
+            "title": "Recipe help",
             "prompt": "How do I make a delicious lemon cheesecake?"
           }
         ]
@@ -119,15 +119,15 @@ envVars:
         },
         "promptExamples": [
           {
-            "title": "Generate a mouse portrait",
+            "title": "Generate image",
             "prompt": "Generate the portrait of a scientific mouse in its laboratory."
           },
           {
-            "title": "Review a pull request",
+            "title": "Review code",
             "prompt": "Review this pull request: https://github.com/huggingface/chat-ui/pull/1131/files"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           }
         ]
@@ -193,7 +193,7 @@ envVars:
         "endpoints": [
           {
             "type": "openai",
-            "baseURL": "https://internal.api-inference.huggingface.co/models/nvidia/Llama-3.1-Nemotron-70B-Instruct-HF/v1"
+            "baseURL": "https://internalRs in strawberry.api-inference.huggingface.co/models/nvidia/Llama-3.1-Nemotron-70B-Instruct-HF/v1"
           }
         ]
       },
@@ -245,7 +245,7 @@ envVars:
         },
         "promptExamples": [
           {
-            "title": "To-do list web app",
+            "title": "Build a webapp",
             "prompt": "Create a simple to-do list application where users can:\n- Add new tasks.\n- Mark tasks as complete.\n- Delete completed tasks.\nThe tasks should persist in the browser's local storage so that they remain available even after a page reload.\n"
           },
           {
@@ -272,15 +272,15 @@ envVars:
         "websiteUrl": "https://blog.google/technology/developers/gemma-3/",
         "promptExamples": [
           {
-            "title": "Write an email from bullet list",
+            "title": "Write an email",
             "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           },
           {
-            "title": "Assist in a task",
+            "title": "Recipe help",
             "prompt": "How do I make a delicious lemon cheesecake?"
           }
         ],
@@ -314,15 +314,15 @@ envVars:
         },
         "promptExamples": [
           {
-            "title": "Write an email from bullet list",
+            "title": "Write an email",
             "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           },
           {
-            "title": "Assist in a task",
+            "title": "Recipe help",
             "prompt": "How do I make a delicious lemon cheesecake?"
           }
         ],
@@ -350,15 +350,15 @@ envVars:
         "modelUrl": "https://huggingface.co/NousResearch/Hermes-3-Llama-3.1-8B",
         "promptExamples": [
           {
-            "title": "Write an email from bullet list",
+            "title": "Write an email",
             "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           },
           {
-            "title": "Assist in a task",
+            "title": "Recipe help",
             "prompt": "How do I make a delicious lemon cheesecake?"
           }
         ],
@@ -385,15 +385,15 @@ envVars:
         },
         "promptExamples": [
           {
-            "title": "Write an email from bullet list",
+            "title": "Write an email",
             "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           },
           {
-            "title": "Assist in a task",
+            "title": "Recipe help",
             "prompt": "How do I make a delicious lemon cheesecake?"
           }
         ]
@@ -413,15 +413,15 @@ envVars:
         },
         "promptExamples": [
           {
-            "title": "Write an email from bullet list",
+            "title": "Write an email",
             "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
           },
           {
-            "title": "Code a snake game",
+            "title": "Code a game",
             "prompt": "Code a basic snake game in python, give explanations for each step."
           },
           {
-            "title": "Assist in a task",
+            "title": "Recipe help",
             "prompt": "How do I make a delicious lemon cheesecake?"
           }
         ]

docs/source/configuration/models/overview.md

@@ -22,13 +22,13 @@ MODELS=`[
     },
     "promptExamples": [
       {
-        "title": "Write an email from bullet list",
+        "title": "Write an email",
         "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
       }, {
-        "title": "Code a snake game",
+        "title": "Code a game",
         "prompt": "Code a basic snake game in python, give explanations for each step."
       }, {
-        "title": "Assist in a task",
+        "title": "Recipe help",
         "prompt": "How do I make a delicious lemon cheesecake?"
       }
     ]

docs/source/configuration/models/providers/tgi.md

@@ -31,13 +31,13 @@ MODELS=`[
     },
     "promptExamples": [
       {
-        "title": "Write an email from bullet list",
+        "title": "Write an email",
         "prompt": "As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
       }, {
-        "title": "Code a snake game",
+        "title": "Code a game",
         "prompt": "Code a basic snake game in python, give explanations for each step."
       }, {
-        "title": "Assist in a task",
+        "title": "Recipe help",
         "prompt": "How do I make a delicious lemon cheesecake?"
       }
     ]

src/lib/components/chat/ChatIntroduction.svelte

@@ -78,18 +78,21 @@
 	</div>
 	{#if currentModel.promptExamples}
 		<div class="lg:col-span-3 lg:mt-6">
-			<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
-			<div class="grid gap-3 lg:grid-cols-3 lg:gap-5">
+			<p class="mb-3 text-center text-gray-600 dark:text-gray-300 lg:text-left">Examples</p>
+			<div
+				class="flex max-h-60 gap-2 overflow-x-auto pb-2 text-center scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 lg:grid lg:grid-cols-3 lg:overflow-y-auto lg:text-left"
+			>
 				{#each currentModel.promptExamples as example}
 					<button
 						type="button"
-						class="rounded-xl border bg-gray-50 p-3 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 max-xl:text-sm xl:p-3.5"
+						class="flex-shrink-0 rounded-xl border bg-gray-50 p-2.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-3 lg:w-full xl:p-3.5 xl:text-base"
 						onclick={() => dispatch("message", example.prompt)}
 					>
 						{example.title}
 					</button>
 				{/each}
 			</div>
-		</div>{/if}
+		</div>
+	{/if}
 	<div class="h-40 sm:h-24"></div>
 </div>