Watch for a query parameter for the prompt within the text-to-cad UI (#8676)

* Watch for a query parameter for the prompt within the text-to-cad UI

All of the "try in browser" links in the website for TTC have been
broken since we migrated from the command-based implementation to the
pane-based implementation. This provides a way for URLs to include a
prompt that will be picked up by the pane UI and then deleted from the
search parameters. A separate PR is being made to allow URLs to set the
layout, so that we can guarantee that the TTC pane is open in a new
iteration of these "try in browser" links. But it's worth noting that
this implementation does not rely on the pane being open initially: the
param will stick around until the pane is opened.

* Hoist the state up and out of the textarea component

* Fix cursor-at-end problem

* fix: tsc errors

Author: franknoirot

src/components/MlEphantConversation2.tsx

@@ -29,6 +29,7 @@ export interface MlEphantConversationProps {
   disabled?: boolean
   hasPromptCompleted: boolean
   userAvatarSrc?: string
+  defaultPrompt?: string
 }
 
 const ML_COPILOT_TOOLS: Readonly<MlCopilotTool[]> = Object.freeze([
@@ -252,6 +253,7 @@ interface MlEphantConversationInputProps {
   billingContext: BillingContext
   onProcess: MlEphantConversationProps['onProcess']
   disabled?: boolean
+  defaultPrompt?: string
 }
 
 function BillingStatusBarItem(props: { billingContext: BillingContext }) {
@@ -326,6 +328,9 @@ export const MlEphantConversationInput = (
     setExcludedTools(new Set(excludedTools))
   }
 
+  // Without this the cursor ends up at the start of the text
+  useEffect(() => setValue(props.defaultPrompt || ''), [props.defaultPrompt])
+
   useEffect(() => {
     if (
       value.length === 0 &&
@@ -514,6 +519,7 @@ export const MlEphantConversation2 = (props: MlEphantConversationProps) => {
               disabled={props.disabled || props.isLoading}
               onProcess={onProcess}
               billingContext={props.billingContext}
+              defaultPrompt={props.defaultPrompt}
             />
           </div>
         </div>

src/components/ModelingSidebar/ModelingPanes/MlEphantConversationPane2.tsx

@@ -4,7 +4,7 @@ import { type settings } from '@src/lib/settings/initialSettings'
 import type CodeManager from '@src/lang/codeManager'
 import type { KclManager } from '@src/lang/KclSingleton'
 import type { SystemIOActor } from '@src/lib/singletons'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { SystemIOMachineEvents } from '@src/machines/systemIO/utils'
 import { MlEphantConversation2 } from '@src/components/MlEphantConversation2'
 import type { MlEphantManagerActor2 } from '@src/machines/mlEphantManagerMachine2'
@@ -19,6 +19,12 @@ import type { FileEntry, Project } from '@src/lib/project'
 import type { BillingActor } from '@src/machines/billingMachine'
 import { useSelector } from '@xstate/react'
 import type { User, MlCopilotServerMessage, MlCopilotTool } from '@kittycad/lib'
+import { useSearchParams } from 'react-router-dom'
+/** URL query param key we watch for prompt input
+ *  we should never set this search param from the app,
+ *  only read and delete.
+ */
+const SEARCH_PARAM_PROMPT_KEY = 'ttc-prompt'
 
 export const MlEphantConversationPane2 = (props: {
   mlEphantManagerActor: MlEphantManagerActor2
@@ -32,6 +38,8 @@ export const MlEphantConversationPane2 = (props: {
   settings: typeof settings
   user?: User
 }) => {
+  const [defaultPrompt, setDefaultPrompt] = useState('')
+  const [searchParams, setSearchParams] = useSearchParams()
   const conversation = useSelector(props.mlEphantManagerActor, (actor) => {
     return actor.context.conversation
   })
@@ -178,6 +186,20 @@ export const MlEphantConversationPane2 = (props: {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [props.settings.meta.id.current])
 
+  // We watch the URL for a query parameter to set the defaultPrompt
+  // for the conversation.
+  useEffect(() => {
+    const ttcPromptParam = searchParams.get(SEARCH_PARAM_PROMPT_KEY)
+    if (ttcPromptParam) {
+      setDefaultPrompt(ttcPromptParam)
+
+      // Now clear that param
+      const newSearchParams = new URLSearchParams(searchParams)
+      newSearchParams.delete(SEARCH_PARAM_PROMPT_KEY)
+      setSearchParams(newSearchParams, { replace: true })
+    }
+  }, [searchParams, setSearchParams])
+
   return (
     <MlEphantConversation2
       isLoading={conversation === undefined}
@@ -192,6 +214,7 @@ export const MlEphantConversationPane2 = (props: {
       disabled={isProcessing}
       hasPromptCompleted={isProcessing}
       userAvatarSrc={props.user?.image}
+      defaultPrompt={defaultPrompt}
     />
   )
 }