Merge pull request #52935 from NousResearch/bb/desktop-inline-rendering

feat(desktop): inline rich embeds, diagrams & alerts in assistant markdown

apps/desktop/src/app/settings/appearance-settings.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 
 import { LanguageSwitcher } from '@/components/language-switcher'
+import { Button } from '@/components/ui/button'
 import { SegmentedControl } from '@/components/ui/segmented-control'
 import type { DesktopMarketplaceSearchItem } from '@/global'
 import { useI18n } from '@/i18n'
@@ -10,6 +11,7 @@ import { triggerHaptic } from '@/lib/haptics'
 import { Check, Download, Loader2, Palette, Trash2 } from '@/lib/icons'
 import { selectableCardClass } from '@/lib/selectable-card'
 import { cn } from '@/lib/utils'
+import { $embedAllowed, $embedMode, clearEmbedAllowed, type EmbedMode, setEmbedMode } from '@/store/embed-consent'
 import { $activeGatewayProfile, $profiles, normalizeProfileKey } from '@/store/profile'
 import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
 import { $translucency, setTranslucency } from '@/store/translucency'
@@ -215,6 +217,8 @@ export function AppearanceSettings() {
   const { t, isSavingLocale } = useI18n()
   const { themeName, mode, resolvedMode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
+  const embedMode = useStore($embedMode)
+  const embedAllowed = useStore($embedAllowed)
   const translucency = useStore($translucency)
   const profiles = useStore($profiles)
   const activeProfileKey = normalizeProfileKey(useStore($activeGatewayProfile))
@@ -266,6 +270,12 @@ export function AppearanceSettings() {
     { id: 'technical', label: a.technical }
   ] as const
 
+  const embedOptions = [
+    { id: 'ask', label: a.embedsAsk },
+    { id: 'always', label: a.embedsAlways },
+    { id: 'off', label: a.embedsOff }
+  ] as const satisfies readonly { id: EmbedMode; label: string }[]
+
   return (
     <SettingsContent>
       <div>
@@ -425,6 +435,35 @@ export function AppearanceSettings() {
             description={a.toolViewDesc}
             title={a.toolViewTitle}
           />
+
+          <ListRow
+            action={
+              <div className="flex flex-col items-end gap-1.5">
+                <SegmentedControl
+                  onChange={id => {
+                    triggerHaptic('selection')
+                    setEmbedMode(id)
+                  }}
+                  options={embedOptions}
+                  value={embedMode}
+                />
+                {embedAllowed.length > 0 && (
+                  <Button
+                    onClick={() => {
+                      triggerHaptic('selection')
+                      clearEmbedAllowed()
+                    }}
+                    size="inline"
+                    variant="text"
+                  >
+                    {a.embedsReset(embedAllowed.length)}
+                  </Button>
+                )}
+              </div>
+            }
+            description={a.embedsDesc}
+            title={a.embedsTitle}
+          />
         </div>
       </div>