From ee9aa146e96c6e87dd96b1aff5d600c477d75154 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rob.gordon@tone-row.com>
Date: Fri, 12 Jan 2024 12:16:21 -0500
Subject: [PATCH] Inline AI Improvements

---
 api/_lib/_llm.ts                  |  4 ++++
 api/prompt/edit.ts                |  8 ++++----
 app/src/components/EditWithAI.tsx | 18 ++++++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/api/_lib/_llm.ts b/api/_lib/_llm.ts
index 9db8e18b4..ecdf7e8e5 100644
--- a/api/_lib/_llm.ts
+++ b/api/_lib/_llm.ts
@@ -16,6 +16,10 @@ export async function llmMany<T extends Record<string, ZodObject<any>>>(
 
     const completion = await openai.chat.completions.create({
       messages: [
+        {
+          role: "system",
+          content: `You are a helpful AI flowchart wizard. Create or update a flowchart for the user according the given message. Always respond with a complete and correct flowchart. If the user requests an entirely new flowchart, ignore the curren state and start from scratch.`,
+        },
         {
           role: "user",
           content,
diff --git a/api/prompt/edit.ts b/api/prompt/edit.ts
index 60a7898eb..201263606 100644
--- a/api/prompt/edit.ts
+++ b/api/prompt/edit.ts
@@ -26,11 +26,11 @@ const handler: VercelApiHandler = async (req, res) => {
   }
 
   const result = await llmMany(
-    `You are a one-shot AI flowchart assistant. Help the user with a flowchart or diagram. Here is the current state of the flowchart:
+    `${prompt}
+    
+Here is the current state of the flowchart:
 ${JSON.stringify(graph, null, 2)}
-
-Here is the user's message:
-${prompt}`,
+`,
     {
       updateGraph: graphSchema,
     }
diff --git a/app/src/components/EditWithAI.tsx b/app/src/components/EditWithAI.tsx
index 23ca9365c..dd6e91d01 100644
--- a/app/src/components/EditWithAI.tsx
+++ b/app/src/components/EditWithAI.tsx
@@ -135,6 +135,7 @@ export function EditWithAI() {
     [edit, isProUser]
   );
 
+  const [txtPrompt, setTxtPrompt] = useState("");
   const handleSubmit = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -177,7 +178,7 @@ export function EditWithAI() {
             color="purple"
             size="sm"
             rounded
-            className="aria-[expanded=true]:bg-purple-700 !pt-2 !pb-[9px] !pl-3 !pr-4"
+            className="aria-[expanded=true]:bg-purple-700 !pt-2 !pb-[9px] !pl-3 !pr-4 disabled:!opacity-100"
             isLoading={isLoading}
           >
             <span className="text-[15px]">
@@ -191,6 +192,17 @@ export function EditWithAI() {
             sideOffset={10}
             align="end"
             className="w-[300px] bg-white rounded shadow border border-purple-300 p-2 !z-[100] animate-slideDownAndFade dark:bg-neutral-300 dark:text-neutral-800 dark:border-neutral-300"
+            onOpenAutoFocus={(e) => {
+              e.preventDefault();
+              if (!formRef.current) return;
+
+              // highlight the contexts of the textarea inside the form
+              const textarea = formRef.current.querySelector("textarea");
+              if (!textarea) return;
+
+              textarea.focus();
+              textarea.select();
+            }}
           >
             <form className="grid gap-2" onSubmit={handleSubmit} ref={formRef}>
               <div className="relative">
@@ -199,6 +211,8 @@ export function EditWithAI() {
                   className="text-xs w-full resize-none h-24 p-2 leading-normal dark:bg-neutral-300"
                   name="prompt"
                   required
+                  value={txtPrompt}
+                  onChange={(e) => setTxtPrompt(e.target.value)}
                   onKeyDown={(e) => {
                     if (!formRef.current) return;
 
@@ -232,7 +246,7 @@ export function EditWithAI() {
       >
         <Toast.Description>
           <div className="flex text-xs items-center gap-3">
-            <Robot size={24} />
+            <Robot size={24} className="shrink-0" />
             <p className="leading-normal">{message}</p>
           </div>
         </Toast.Description>