chore: enable svelte/require-each-key

eslint.config.mjs

@@ -234,7 +234,6 @@ export default [
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/ban-types': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',
-      'svelte/require-each-key': 'off',
       'svelte/infinite-reactive-loop': 'off',
     },
   },

packages/frontend/src/lib/RecipeCardTags.svelte

@@ -117,7 +117,7 @@ function toggleExpanded(): void {
   class="w-full flex flex-row gap-2 py-2"
   class:overflow-hidden={!expanded}
   class:flex-wrap={expanded}>
-  {#each TAGS as tag, i}
+  {#each TAGS as tag, i (tag)}
     <div bind:this={divTags[i]}>
       <Badge class="{getBGColor(tag)} {getTextColor(tag)}" content={updateContent(tag)} />
     </div>

packages/frontend/src/lib/RecipesCard.svelte

@@ -14,7 +14,7 @@ export let recipes: Recipe[];
       <div class="text-gray-400 mt-2">There is no recipe in this category for now ! Come back later</div>
     {/if}
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4">
-      {#each recipes as recipe}
+      {#each recipes as recipe (recipe.id)}
         <RecipeCard recipe={recipe} />
       {/each}
     </div>

packages/frontend/src/lib/conversation/ChatMessage.svelte

@@ -55,7 +55,7 @@ function elapsedTime(msg: AssistantChat): string {
     class:bg-[var(--pd-content-card-inset-bg)]={isAssistantChat(message)}
     class:ml-8={isAssistantChat(message)}
     class:mr-8={isUserChat(message)}>
-    {#each getMessageParagraphs(message) as paragraph}
+    {#each getMessageParagraphs(message) as paragraph (paragraph)}
       <p>{paragraph}</p>
     {/each}
   </div>

packages/frontend/src/lib/progress/TasksProgress.svelte

@@ -7,7 +7,7 @@ export let tasks: Task[] = [];
 </script>
 
 <ul class="space-y-2 text-[var(--pd-content-card-text)] list-inside">
-  {#each tasks as task}
+  {#each tasks as task (task.id)}
     <li class="flex flex-col rounded-md bg-[var(--pd-content-card-bg)] p-2">
       <TaskItem task={task} />
       <ExpandableMessage message={task.error} title="View Error" />

packages/frontend/src/lib/table/service/ServiceColumnModelName.spec.ts

@@ -31,6 +31,7 @@ test('the model name should be displayed', async () => {
       health: undefined,
       models: [
         {
+          id: 'model1',
           name: 'dummyName',
         } as unknown as ModelInfo,
       ],
@@ -51,9 +52,11 @@ test('multiple models name should be displayed as list', async () => {
       health: undefined,
       models: [
         {
+          id: 'model1',
           name: 'dummyName-1',
         } as unknown as ModelInfo,
         {
+          id: 'model2',
           name: 'dummyName-2',
         } as unknown as ModelInfo,
       ],

packages/frontend/src/lib/table/service/ServiceColumnModelName.svelte

@@ -10,7 +10,7 @@ export let object: InferenceServer;
   </span>
 {:else}
   <ul>
-    {#each object.models as model}
+    {#each object.models as model (model.id)}
       <li class="text-[var(--pd-table-body-text)]">{model.name}</li>
     {/each}
   </ul>

packages/frontend/src/pages/ImportModel.svelte

@@ -176,7 +176,7 @@ function handleDragLeave(): void {
               on:change={onBackendChange}
               name="backend"
               class="border rounded-lg w-full focus:ring-purple-500 focus:border-purple-500 block p-2.5 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white">
-              {#each Object.values(InferenceType) as type}
+              {#each Object.values(InferenceType) as type (type)}
                 <option value={type}>{type}</option>
               {/each}
             </select>

packages/frontend/src/pages/InferenceServerDetails.svelte

@@ -266,7 +266,7 @@ function handleOnChange(): void {
                       {service.models.length > 1 ? 'Models' : 'Model'}
                     </span>
                     <div>
-                      {#each service.models as model}
+                      {#each service.models as model (model.id)}
                         <div>
                           <div
                             class="w-full bg-[var(--pd-label-bg)] text-[var(--pd-label-text)] rounded-md px-2 py-1 flex flex-col gap-y-4">
@@ -331,7 +331,7 @@ function handleOnChange(): void {
                     id="languages"
                     class="border ml-1 text-sm rounded-lg bg-[var(--pd-action-button-details-bg)] block p-1 border-[var(--pd-action-button-details-bg)] placeholder-gray-700 text-[var(--pd-action-button-details-text)]"
                     name="languages">
-                    {#each $snippetLanguages as language}
+                    {#each $snippetLanguages as language (language.key)}
                       <option class="my-1" value={language.key}>{language.label}</option>
                     {/each}
                   </select>
@@ -345,7 +345,7 @@ function handleOnChange(): void {
                       disabled={variants.length === 1}
                       class="border ml-1 text-sm rounded-lg bg-[var(--pd-action-button-details-bg)] block p-1 border-[var(--pd-action-button-details-bg)] placeholder-gray-700 text-[var(--pd-action-button-details-text)]"
                       name="variants">
-                      {#each variants as variant}
+                      {#each variants as variant (variant.key)}
                         <option class="my-1" value={variant.key}>{variant.key}</option>
                       {/each}
                     </select>

packages/frontend/src/pages/Playground.svelte

@@ -223,7 +223,7 @@ function handleOnClick(): void {
                       {/key}
                       <!-- show all message except the system prompt -->
                       <ul>
-                        {#each messages as message}
+                        {#each messages as message (message.id)}
                           <li>
                             <ChatMessage message={message} />
                           </li>

packages/frontend/src/pages/Recipe.svelte

@@ -88,7 +88,7 @@ function getFilter(items: ApplicationState[]): ApplicationState[] {
   </svelte:fragment>
   <svelte:fragment slot="subtitle">
     <div class="mt-2">
-      {#each recipe?.categories ?? [] as categoryId}
+      {#each recipe?.categories ?? [] as categoryId (categoryId)}
         <Card
           title={categories.find(category => category.id === categoryId)?.name ?? '?'}
           classes="bg-[var(--pd-label-bg)] p-1 text-xs w-fit" />

packages/frontend/src/pages/Recipes.svelte

@@ -101,7 +101,7 @@ const filtersComponents: { label: string; key: CatalogFilterKey }[] = [
     <div class="min-w-full min-h-full flex-1">
       <div class="px-5 space-y-5">
         <div class="flex flex-row space-x-2 text-[var(--pd-modal-text)]">
-          {#each filtersComponents as filterComponent}
+          {#each filtersComponents as filterComponent (filterComponent.key)}
             <div class="w-full">
               <label for={filterComponent.key} class="block mb-2 text-sm font-medium">{filterComponent.label}</label>
               <Dropdown
@@ -112,7 +112,7 @@ const filtersComponents: { label: string; key: CatalogFilterKey }[] = [
           {/each}
         </div>
         {#if groups}
-          {#each groups.entries() as [category, recipes]}
+          {#each groups.entries() as [category, recipes] (category.id)}
             <RecipesCard category={category} recipes={recipes} />
           {/each}
         {/if}