ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Frank Noirot
2025-02-28 16:26:11 -05:00
committed by GitHub
parent b92b0a9afe
commit a91208eb1c
2 changed files with 59 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
e2e/playwright/prompt-to-edit.spec.ts
View File

@ -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], %)
|> xLine(173.71, %)
|> line(end = [-22.12, -94.4])
|> xLine(-156.98, %)
|> startProfileAt([-114, 85.52], %)
|> xLine(265.36, %)
|> line(end = [33.17, -261.22])
|> 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 greenCheckCoords = { x: 565, y: 345 }
const body1CapCoords = { x: 571, y: 311 }
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: [],
})

46
src/components/ToastTextToCad.tsx
View File

@ -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">