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
This commit is contained in:
@ -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">
|
||||
|
Reference in New Issue
Block a user