Text-to-CAD with alpha model (might have issues) integration (#3299)

* Add close dismiss button to Infinite duration non-loading toasts * Add text-to-cad icon candidates * Add a way to silently create files * Add text-to-cad command with mock backend * add the actual endpoint Signed-off-by: Jess Frazelle <github@jessfraz.com> * fix the response Signed-off-by: Jess Frazelle <github@jessfraz.com> * fixups Signed-off-by: Jess Frazelle <github@jessfraz.com> * Add `credentials: include` * add headers Signed-off-by: Jess Frazelle <github@jessfraz.com> * Mostly working? Just getting CORS on desktop * Merge goof * fixups Signed-off-by: Jess Frazelle <github@jessfraz.com> * create cross platform fetch; Signed-off-by: Jess Frazelle <github@jessfraz.com> * send the token; Signed-off-by: Jess Frazelle <github@jessfraz.com> * send the token; Signed-off-by: Jess Frazelle <github@jessfraz.com> * better names for files Signed-off-by: Jess Frazelle <github@jessfraz.com> * Commit broken THREEjs success toast * base64 decode Signed-off-by: Jess Frazelle <github@jessfraz.com> * send telemetry on reject / accept Signed-off-by: Jess Frazelle <github@jessfraz.com> * start of tests Signed-off-by: Jess Frazelle <github@jessfraz.com> * more tests Signed-off-by: Jess Frazelle <github@jessfraz.com> * basic tests; Signed-off-by: Jess Frazelle <github@jessfraz.com> * lego Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * fixes Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * fmt Signed-off-by: Jess Frazelle <github@jessfraz.com> * fixes Signed-off-by: Jess Frazelle <github@jessfraz.com> * Get model stylized based on settings * Don't need automatic dismiss button for Infinity-duration toasts anymore * Stylize loaded model, add OrbitControls, polish button behavior * Allow user to retry prompt if one fails * Add an auto-grow textarea input type to the command bar, set text-to-cad to use it * Delete the created file in desktop if user rejects it * Submit with meta+Enter * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * add more tests and various fixes Signed-off-by: Jess Frazelle <github@jessfraz.com> * Set `prompt` arg defaultValue to failed prompt value on retry * Add missing `awaits` to playwright tests to get them passing * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * empty --------- Signed-off-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-08-14 14:26:44 -04:00
parent 669cab8737
commit 5bdd090119
34 changed files with 1420 additions and 46 deletions
--- a/src/components/CommandBar/CommandBarArgument.tsx
+++ b/src/components/CommandBar/CommandBarArgument.tsx
@ -5,6 +5,7 @@ import { CommandArgument } from 'lib/commandTypes'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import CommandBarHeader from './CommandBarHeader'
 import CommandBarKclInput from './CommandBarKclInput'
+import CommandBarTextareaInput from './CommandBarTextareaInput'

 function CommandBarArgument({ stepBack }: { stepBack: () => void }) {
  const { commandBarState, commandBarSend } = useCommandsContext()
@ -87,6 +88,14 @@ function ArgumentInput({
      return (
        <CommandBarKclInput arg={arg} stepBack={stepBack} onSubmit={onSubmit} />
      )
+    case 'text':
+      return (
+        <CommandBarTextareaInput
+          arg={arg}
+          stepBack={stepBack}
+          onSubmit={onSubmit}
+        />
+      )
    default:
      return (
        <CommandBarBasicInput
--- a/src/components/CommandBar/CommandBarTextareaInput.tsx
+++ b/src/components/CommandBar/CommandBarTextareaInput.tsx
@ -0,0 +1,109 @@
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { CommandArgument } from 'lib/commandTypes'
+import { RefObject, useEffect, useRef } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+function CommandBarTextareaInput({
+  arg,
+  stepBack,
+  onSubmit,
+}: {
+  arg: CommandArgument<unknown> & {
+    inputType: 'text'
+    name: string
+  }
+  stepBack: () => void
+  onSubmit: (event: unknown) => void
+}) {
+  const { commandBarSend, commandBarState } = useCommandsContext()
+  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  const formRef = useRef<HTMLFormElement>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  useTextareaAutoGrow(inputRef)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [arg, inputRef])
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    onSubmit(inputRef.current?.value)
+  }
+
+  return (
+    <form id="arg-form" onSubmit={handleSubmit} ref={formRef}>
+      <label className="flex items-start rounded mx-4 my-4 border border-chalkboard-100 dark:border-chalkboard-80">
+        <span className="capitalize px-2 py-1 rounded-br bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80">
+          {arg.name}
+        </span>
+        <textarea
+          id="arg-form"
+          name={arg.inputType}
+          ref={inputRef}
+          required
+          className="flex-grow mx-2 my-1 !bg-transparent focus:outline-none min-h-12"
+          placeholder="Enter a value"
+          defaultValue={
+            (commandBarState.context.argumentsToSubmit[arg.name] as
+              | string
+              | undefined) || (arg.defaultValue as string)
+          }
+          onKeyDown={(event) => {
+            if (event.key === 'Backspace' && !event.currentTarget.value) {
+              stepBack()
+            } else if (
+              event.key === 'Enter' &&
+              (event.metaKey || event.shiftKey)
+            ) {
+              // Insert a newline
+              event.preventDefault()
+              const target = event.currentTarget
+              const value = target.value
+              const selectionStart = target.selectionStart
+              const selectionEnd = target.selectionEnd
+              target.value =
+                value.substring(0, selectionStart) +
+                '\n' +
+                value.substring(selectionEnd)
+              target.selectionStart = selectionStart + 1
+              target.selectionEnd = selectionStart + 1
+            } else if (event.key === 'Enter') {
+              formRef.current?.dispatchEvent(
+                new Event('submit', { bubbles: true })
+              )
+            }
+          }}
+          autoFocus
+        />
+      </label>
+    </form>
+  )
+}
+
+/**
+ * Modified from https://www.reddit.com/r/reactjs/comments/twmild/comment/i3jf330/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button
+ * Thank you to @sidkh for the original code
+ */
+const useTextareaAutoGrow = (ref: RefObject<HTMLTextAreaElement>) => {
+  useEffect(() => {
+    const listener = () => {
+      if (ref.current === null) return
+      ref.current.style.padding = '0px'
+      ref.current.style.height = ref.current.scrollHeight + 'px'
+      ref.current.style.removeProperty('padding')
+    }
+
+    if (ref.current === null) return
+    ref.current.addEventListener('input', listener)
+
+    return () => {
+      if (ref.current === null) return
+      ref.current.removeEventListener('input', listener)
+    }
+  }, [ref.current])
+}
+
+export default CommandBarTextareaInput