Add expandable disclosure to AI operation success toasts (#5555)

* Add expandable disclosure to Text-to-CAD success toast

Closes #5258 by adding a details element that the user can open if they
don't like the result of their "successful" prompt.

* Add the same disclosure to the Prompt-to-Edit toast

* Rework text per @greg-kcio's feedback

* Fix tsc

* WIP fix up ttc e2e tests

e2e/playwright/prompt-to-edit.spec.ts

@@ -12,10 +12,10 @@ profile001 = startProfileAt([57.81, 250.51], sketch001)
   |> close()
 extrude001 = extrude(profile001, length = 200)
 sketch002 = startSketchOn('XZ')
-  |> startProfileAt([-73.64, -42.89], %)
+  |> startProfileAt([-114, 85.52], %)
-  |> xLine(173.71, %)
+  |> xLine(265.36, %)
-  |> line(end = [-22.12, -94.4])
+  |> line(end = [33.17, -261.22])
-  |> xLine(-156.98, %)
+  |> xLine(-297.25, %)
   |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
   |> close()
 extrude002 = extrude(sketch002, length = 50)
@@ -62,8 +62,8 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
         await homePage.goToModelingScene()
         await scene.waitForExecutionDone()
 
-        const body1CapCoords = { x: 571, y: 351 }
+        const body1CapCoords = { x: 571, y: 311 }
-        const greenCheckCoords = { x: 565, y: 345 }
+        const greenCheckCoords = { x: 565, y: 305 }
         const body2WallCoords = { x: 609, y: 153 }
         const [clickBody1Cap] = scene.makeMouseHelpers(
           body1CapCoords.x,
@@ -88,7 +88,7 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
           await scene.expectPixelColor(yellow, body1CapCoords, 20)
           await editor.expectState({
             highlightedCode: '',
-            activeLines: ['|>startProfileAt([-73.64,-42.89],%)'],
+            activeLines: ['|>startProfileAt([-114,85.52],%)'],
             diagnostics: [],
           })
         })
@@ -157,7 +157,7 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
     await homePage.goToModelingScene()
     await scene.waitForExecutionDone()
 
-    const body1CapCoords = { x: 571, y: 351 }
+    const body1CapCoords = { x: 571, y: 311 }
     const [clickBody1Cap] = scene.makeMouseHelpers(
       body1CapCoords.x,
       body1CapCoords.y
@@ -176,7 +176,7 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
 
       await editor.expectState({
         highlightedCode: '',
-        activeLines: ['|>startProfileAt([-73.64,-42.89],%)'],
+        activeLines: ['|>startProfileAt([-114,85.52],%)'],
         diagnostics: [],
       })
     })
@@ -204,7 +204,7 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
     page,
     scene,
   }) => {
-    const body1CapCoords = { x: 571, y: 351 }
+    const body1CapCoords = { x: 571, y: 311 }
 
     await context.addInitScript((file) => {
       localStorage.setItem('persistCode', file)
@@ -263,7 +263,7 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
     page,
     scene,
   }) => {
-    const body1CapCoords = { x: 571, y: 351 }
+    const body1CapCoords = { x: 571, y: 311 }
     const body2WallCoords = { x: 620, y: 152 }
     const [clickBody1Cap] = scene.makeMouseHelpers(
       body1CapCoords.x,
@@ -299,7 +299,7 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
       // Hold shift and select second body
       await editor.expectState({
         highlightedCode: '',
-        activeLines: ['|>startProfileAt([-73.64,-42.89],%)'],
+        activeLines: ['|>startProfileAt([-114,85.52],%)'],
         diagnostics: [],
       })
       await page.keyboard.down('Shift')
@@ -310,7 +310,7 @@ test.describe('Prompt-to-edit tests', { tag: '@skipWin' }, () => {
           'line(end=[121.13,56.63],tag=$seg02)extrude(profile001,length=200)',
         activeLines: [
           '|>line(end=[121.13,56.63],tag=$seg02)',
-          '|>startProfileAt([-73.64,-42.89],%)',
+          '|>startProfileAt([-114,85.52],%)',
         ],
         diagnostics: [],
       })

src/components/ToastTextToCad.tsx

@@ -33,12 +33,50 @@ import { EventFrom } from 'xstate'
 import { fileMachine } from 'machines/fileMachine'
 import { reportRejection } from 'lib/trap'
 import { codeManager, kclManager } from 'lib/singletons'
+import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 
 const CANVAS_SIZE = 128
 const PROMPT_TRUNCATE_LENGTH = 128
 const FRUSTUM_SIZE = 0.5
 const OUTPUT_KEY = 'source.glb'
 
+function TextToCadImprovementMessage({
+  label,
+  ...rest
+}: React.HTMLAttributes<HTMLDetailsElement> & { label: string }) {
+  return (
+    <details {...rest}>
+      <summary className="text-chalkboard-70 dark:text-chalkboard-30">
+        {label}
+      </summary>
+      <p className="text-sm text-chalkboard-70 dark:text-chalkboard-30">
+        Text-to-CAD is a new ML model. There will be prompts that work and
+        prompts that don't and prompts that generate something a little bit off.
+        Sometimes even a small tweak to your prompt will make it better on the
+        next run. Try our prompt-to-edit feature to iterate on your result with
+        AI. We look at all the failures to make the model better and see our
+        weaknesses. Over time the model will get better. See our{' '}
+        <a
+          href="https://discord.gg/JQEpHR7Nt2"
+          onClick={openExternalBrowserIfDesktop(
+            'https://discord.gg/JQEpHR7Nt2'
+          )}
+        >
+          Discord
+        </a>{' '}
+        or{' '}
+        <a
+          href="https://community.zoo.dev/"
+          onClick={openExternalBrowserIfDesktop('https://community.zoo.dev/')}
+        >
+          Discourse
+        </a>{' '}
+        or some prompting tips from the community or our team.
+      </p>
+    </details>
+  )
+}
+
 export function ToastTextToCadError({
   toastId,
   message,
@@ -286,6 +324,10 @@ export function ToastTextToCadSuccess({
               : data.prompt}
             "
           </p>
+          <TextToCadImprovementMessage
+            className="text-sm mt-2"
+            label="Not what you expected?"
+          />
         </section>
         <div className="flex justify-between gap-8">
           <ActionButton
@@ -436,6 +478,10 @@ export function ToastPromptToEditCadSuccess({
               : data.prompt}
             "
           </p>
+          <TextToCadImprovementMessage
+            className="text-sm mt-2"
+            label="Not what you expected?"
+          />
           <p>Do you want to keep the change?</p>
         </section>
         <div className="flex justify-between gap-8">