From 06a8f7ea47e9b905e93b478cbfe9c9eb8f7e8ae3 Mon Sep 17 00:00:00 2001
From: Mark Lierman <marklierman@hotmail.com>
Date: Wed, 2 Sep 2026 13:58:09 -0400
Subject: [PATCH] Add AI disclosure icon

Added AI Disclosure icon and tooltip to Mod Details panel
---
 frontend/src/gql/mods/modDetails.graphql      |  4 ++
 .../components/mod-details/ModDetails.svelte  | 62 ++++++++++++++++++-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/frontend/src/gql/mods/modDetails.graphql b/frontend/src/gql/mods/modDetails.graphql
index e3565bc8..f343e9b4 100644
--- a/frontend/src/gql/mods/modDetails.graphql
+++ b/frontend/src/gql/mods/modDetails.graphql
@@ -21,6 +21,10 @@ query GetModDetails($modReference: ModReference!) {
         note
       }
     }
+    ai_use_disclosure {
+      disclosure_type
+      message
+    }
     authors {
       user {
         id
diff --git a/frontend/src/lib/components/mod-details/ModDetails.svelte b/frontend/src/lib/components/mod-details/ModDetails.svelte
index 18ea5392..09fe73f6 100644
--- a/frontend/src/lib/components/mod-details/ModDetails.svelte
+++ b/frontend/src/lib/components/mod-details/ModDetails.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { SizeOptions } from '@floating-ui/dom';
-  import { mdiCheck, mdiChevronDown, mdiImport, mdiRocketLaunch, mdiTestTube, mdiWeb } from '@mdi/js';
+  import { mdiChatProcessing, mdiCheck, mdiChevronDown, mdiImport, mdiRobot, mdiRobotOff, mdiRocketLaunch, mdiTestTube, mdiWeb } from '@mdi/js';
   import { getTranslate } from '@tolgee/svelte';
   import { getContextClient, queryStore } from '@urql/svelte';
   import { SemVer, coerce, minVersion, parse, sort, validRange } from 'semver';
@@ -14,7 +14,7 @@
   import Thumbhash from '$lib/components/Thumbhash.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import ModChangelog from '$lib/components/modals/ModChangelog.svelte';
-  import { CompatibilityState, GetModDetailsDocument } from '$lib/generated';
+  import { AiUseDisclosureType, CompatibilityState, GetModDetailsDocument } from '$lib/generated';
   import { type PopupSettings, getModalStore, popup } from '$lib/skeletonExtensions';
   import { addQueuedModAction } from '$lib/store/actionQueue';
   import { canInstallMods, lockfileMods, manifestMods } from '$lib/store/ficsitCLIStore';
@@ -110,6 +110,27 @@
     return '';
   }
 
+  function iconForAiUseDisclosure(disclosureType: AiUseDisclosureType) {
+    switch(disclosureType) {
+      case AiUseDisclosureType.NoAiUsage:
+        return mdiRobotOff;
+      case AiUseDisclosureType.AiUsage:
+      case AiUseDisclosureType.RuntimeAiUsage:
+        return mdiRobot;
+    }
+  }
+
+  function labelForAiUseDisclosure(disclosureType: AiUseDisclosureType) {
+    switch(disclosureType) {
+      case AiUseDisclosureType.NoAiUsage:
+        return $t('mod-details.ai-disclosure-no-usage', 'No generative AI was used in creating this mod.');
+      case AiUseDisclosureType.AiUsage:
+        return $t('mod-details.ai-disclosure-usage', 'Generative AI was used in this mod\'s creation.');
+      case AiUseDisclosureType.RuntimeAiUsage:
+        return $t('mod-details.ai-disclosure-runtime-usage', 'The user can interact with generative AI while using this mod.');
+    }
+  }
+
   $: manifestVersion = mod && $manifestMods[mod.mod_reference]?.version;
   async function installVersion(version: string | null) {
     if(!mod) {
@@ -170,6 +191,17 @@
     placement: 'bottom',
   } satisfies PopupSettings;
 
+  const aiDisclosurePopupId = 'mod-details-ai-disclosure';
+
+  const aiDisclosurePopup = {
+    event: 'hover',
+    target: aiDisclosurePopupId,
+    middleware: {
+      offset: 4,
+    },
+    placement: 'bottom',
+  } satisfies PopupSettings;
+
   const authorsMenuPopupId = 'mod-details-authors-menu';
 
   const authorsMenu = {
@@ -346,6 +378,32 @@
               </Tooltip>
             {/if}
           </ModDetailsEntry>
+          <ModDetailsEntry label={$t('mod-details.ai-disclosure', 'AI disclosure')} loading={!mod}>
+            {#if mod?.ai_use_disclosure}
+              <div class="flex pl-1">
+                <div class="flex" use:popup={aiDisclosurePopup}>
+                  <SvgIcon class="h-5 w-5" icon={iconForAiUseDisclosure(mod.ai_use_disclosure.disclosure_type)} />
+                  {#if mod.ai_use_disclosure.disclosure_type === AiUseDisclosureType.RuntimeAiUsage}
+                    <SvgIcon class="h-5 w-5" icon={mdiChatProcessing} />
+                  {/if}
+                </div>
+                <Tooltip popupId={aiDisclosurePopupId}>
+                  <span class="text-base font-bold">
+                    {labelForAiUseDisclosure(mod.ai_use_disclosure.disclosure_type)}
+                  </span>
+                  {#if mod.ai_use_disclosure.message}
+                    <Markdown class="[&>p]:my-0" markdown={mod.ai_use_disclosure.message} />
+                  {:else}
+                    <T defaultValue="(No disclosure message provided)" keyName="mod-details.ai-disclosure-no-message" />
+                  {/if}
+                </Tooltip>
+              </div>
+            {:else if mod}
+              <span class="font-bold">
+                <T defaultValue="Unspecified" keyName="mod-details.ai-disclosure-unspecified" />
+              </span>
+            {/if}
+          </ModDetailsEntry>
         {/if}
       </div>