From b15f0621fe72e659360d7ed49072e154410a8164 Mon Sep 17 00:00:00 2001
From: 7HR4IZ3 <90985774+7HR4IZ3@users.noreply.github.com>
Date: Mon, 17 Jun 2024 20:04:54 +0000
Subject: [PATCH 1/5] feat: Added modal for editing long variable values

---
 package-lock.json                             | 51 +++++++++++++
 .../components/SmartViewer/Message.tsx        | 12 ++--
 .../prompts/PromptVariableEditor.tsx          |  5 +-
 .../components/prompts/VariableTextarea.tsx   | 71 +++++++++++++++++++
 packages/frontend/package.json                |  3 +-
 packages/frontend/styles/globals.css          | 20 ++++++
 6 files changed, 153 insertions(+), 9 deletions(-)
 create mode 100644 packages/frontend/components/prompts/VariableTextarea.tsx

diff --git a/package-lock.json b/package-lock.json
index dcf34878..0501cd4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2505,6 +2505,17 @@
         }
       ]
     },
+    "node_modules/chainsaw": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
+      "integrity": "sha512-nG8PYH+/4xB+8zkV4G844EtfvZ5tTiLFoX3dZ4nhF4t3OCKIb9UvaFyNmeZO2zOSmRWzBoTD+napN6hiL+EgcA==",
+      "dependencies": {
+        "traverse": ">=0.3.0 <0.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3722,6 +3733,17 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
     },
+    "node_modules/hashish": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
+      "integrity": "sha512-xyD4XgslstNAs72ENaoFvgMwtv8xhiDtC2AtzCG+8yF7W/Knxxm9BX+e2s25mm+HxMKh0rBmXVOEGF3zNImXvA==",
+      "dependencies": {
+        "traverse": ">=0.2.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -5927,6 +5949,14 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
+    "node_modules/remove": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/remove/-/remove-0.1.5.tgz",
+      "integrity": "sha512-AJMA9oWvJzdTjwIGwSQZsjGQiRx73YTmiOWmfCp1fpLa/D4n7jKcpoA+CZiVLJqKcEKUuh1Suq80c5wF+L/qVQ==",
+      "dependencies": {
+        "seq": ">= 0.3.5"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -6126,6 +6156,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/seq": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
+      "integrity": "sha512-sisY2Ln1fj43KBkRtXkesnRHYNdswIkIibvNe/0UKm2GZxjMbqmccpiatoKr/k2qX5VKiLU8xm+tz/74LAho4g==",
+      "dependencies": {
+        "chainsaw": ">=0.0.7 <0.1",
+        "hashish": ">=0.0.2 <0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -6737,6 +6779,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/traverse": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -7359,6 +7409,7 @@
         "react-dom": "18.2.0",
         "react-json-view-lite": "^1.2.1",
         "recharts": "^2.12.7",
+        "remove": "^0.1.5",
         "shared": "*",
         "swr": "^2.2.4",
         "zod": "^3.22.4"
diff --git a/packages/frontend/components/SmartViewer/Message.tsx b/packages/frontend/components/SmartViewer/Message.tsx
index 7c466b13..2855963c 100644
--- a/packages/frontend/components/SmartViewer/Message.tsx
+++ b/packages/frontend/components/SmartViewer/Message.tsx
@@ -227,8 +227,8 @@ function ToolCallsMessage({
 function TextMessage({ data, onChange = () => {}, editable = false, codeBg }) {
   return (
     <Code block bg={codeBg}>
-      <ProtectedText>
-        {editable ? (
+      {editable ? (
+        <ProtectedText>
           <Textarea
             value={data.content || data.text}
             placeholder="Content"
@@ -236,10 +236,10 @@ function TextMessage({ data, onChange = () => {}, editable = false, codeBg }) {
             onChange={(e) => onChange({ ...data, content: e.target.value })}
             {...ghostTextAreaStyles}
           />
+        </ProtectedText>
         ) : (
-          data.content || data.text
+          <div style={{ width: "100%" }} dangerouslySetInnerHTML={{__html: data.content || data.text}}></div>
         )}
-      </ProtectedText>
     </Code>
   )
 }
@@ -451,8 +451,6 @@ export function ChatMessage({
 
   // Add/remove the 'id' and 'name' props required on tool calls
   useEffect(() => {
-    if (!data) return
-
     // Add/remove the 'name' props required on tool calls
     if (data.role === "tool" && editable && typeof data.name !== "string") {
       onChange({ ...data, name: "some-tool-name" })
@@ -593,4 +591,4 @@ export function BubbleMessage({ role, content, extra }) {
       <Space h="lg" />
     </>
   )
-}
+}
\ No newline at end of file
diff --git a/packages/frontend/components/prompts/PromptVariableEditor.tsx b/packages/frontend/components/prompts/PromptVariableEditor.tsx
index 24a71888..bb934342 100644
--- a/packages/frontend/components/prompts/PromptVariableEditor.tsx
+++ b/packages/frontend/components/prompts/PromptVariableEditor.tsx
@@ -10,6 +10,8 @@ import {
 import { IconInfoCircle } from "@tabler/icons-react"
 import { TemplateVariables } from "shared"
 
+import VariableTextarea from "./VariableTextarea"
+
 export default function PromptVariableEditor({
   value = {},
   onChange,
@@ -56,7 +58,7 @@ export default function PromptVariableEditor({
               >
                 {variable}
               </Badge>
-              <Textarea
+              <VariableTextarea
                 size="xs"
                 w="100%"
                 required={true}
@@ -64,6 +66,7 @@ export default function PromptVariableEditor({
                 rows={1}
                 autosize
                 maxRows={4}
+                name={variable}
                 defaultValue={value[variable]}
                 onChange={(e) =>
                   onChange({
diff --git a/packages/frontend/components/prompts/VariableTextarea.tsx b/packages/frontend/components/prompts/VariableTextarea.tsx
new file mode 100644
index 00000000..c7fad357
--- /dev/null
+++ b/packages/frontend/components/prompts/VariableTextarea.tsx
@@ -0,0 +1,71 @@
+import {
+  Textarea,
+  ActionIcon,
+  TextareaProps,
+  Modal,
+  Button,
+} from "@mantine/core"
+import { IconArrowsMaximize } from "@tabler/icons-react"
+import { useDisclosure } from "@mantine/hooks"
+import { ChangeEvent, useState } from "react"
+
+type VariableTextareaProps = TextareaProps & {
+  name: string
+  defaultValue: string
+}
+
+export default function VariableTextarea({
+  name,
+  defaultValue,
+  onChange,
+  ...props
+}: VariableTextareaProps) {
+  // Local copy of user updated value for popup
+  const [value, setValue] = useState<string>(defaultValue)
+  const [popupButton, setPopupButton] = useState(!!(value?.length >= 70))
+
+  const [opened, { open, close }] = useDisclosure(false)
+
+  const updateValue = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.currentTarget.value)
+    onChange && onChange(e)
+
+    setPopupButton(!!(e.currentTarget.value.length >= 70))
+  }
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={name}
+        overlayProps={{
+          backgroundOpacity: 0.55,
+          blur: 3,
+        }}
+        size="xl"
+      >
+        {/* Modal content */}
+        <Textarea
+          size="lg"
+          required={true}
+          radius="sm"
+          rows={10}
+          autosize
+          value={value}
+          onChange={updateValue}
+        />
+      </Modal>
+
+      <div className="variable-textarea">
+        <Textarea {...props} onChange={updateValue} value={value} />
+
+        {popupButton && (
+          <ActionIcon size="sm" onClick={open} aria-label="expand textarea">
+            <IconArrowsMaximize />
+          </ActionIcon>
+        )}
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 9f6a2fba..f2da1599 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -8,13 +8,13 @@
     "load-env": "bash ./load-env.sh"
   },
   "dependencies": {
+    "@mantine/charts": "7.10.0",
     "@mantine/core": "7.10.0",
     "@mantine/dates": "^7.10.0",
     "@mantine/form": "7.10.0",
     "@mantine/hooks": "7.10.0",
     "@mantine/modals": "7.10.0",
     "@mantine/notifications": "7.10.0",
-    "@mantine/charts": "7.10.0",
     "@sentry/nextjs": "^7.109.0",
     "@tabler/icons-react": "^2.46.0",
     "@tanstack/react-table": "^8.11.2",
@@ -34,6 +34,7 @@
     "react-dom": "18.2.0",
     "react-json-view-lite": "^1.2.1",
     "recharts": "^2.12.7",
+    "remove": "^0.1.5",
     "shared": "*",
     "swr": "^2.2.4",
     "zod": "^3.22.4"
diff --git a/packages/frontend/styles/globals.css b/packages/frontend/styles/globals.css
index aa71366e..a0fd14f3 100644
--- a/packages/frontend/styles/globals.css
+++ b/packages/frontend/styles/globals.css
@@ -41,3 +41,23 @@ span.limited,
 .mantine-Badge-root {
   max-width: 100%;
 }
+
+
+/* Popup textarea for prompt variables */
+.variable-textarea {
+  position: relative;
+}
+
+.variable-textarea > button {
+  bottom: .5rem;
+  right: 2rem;
+  position: absolute;
+  margin-bottom: 0.3rem;
+  background-color: rgba(121, 120, 120, 0.2);
+}
+
+.variable-textarea > div.mantine-Textarea-root {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
\ No newline at end of file

From bb36712a48712640775ee284388f607709e65332 Mon Sep 17 00:00:00 2001
From: 7HR4IZ3 <gamerxville@gmail.com>
Date: Wed, 19 Jun 2024 01:18:32 +0000
Subject: [PATCH 2/5] fix: Made styling component level rather than global

---
 .../components/prompts/VariableTextarea.tsx   | 36 +++++++++----------
 packages/frontend/styles/globals.css          | 20 -----------
 2 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/packages/frontend/components/prompts/VariableTextarea.tsx b/packages/frontend/components/prompts/VariableTextarea.tsx
index c7fad357..d87d1204 100644
--- a/packages/frontend/components/prompts/VariableTextarea.tsx
+++ b/packages/frontend/components/prompts/VariableTextarea.tsx
@@ -1,10 +1,4 @@
-import {
-  Textarea,
-  ActionIcon,
-  TextareaProps,
-  Modal,
-  Button,
-} from "@mantine/core"
+import { Textarea, ActionIcon, TextareaProps, Modal, Box } from "@mantine/core"
 import { IconArrowsMaximize } from "@tabler/icons-react"
 import { useDisclosure } from "@mantine/hooks"
 import { ChangeEvent, useState } from "react"
@@ -22,15 +16,11 @@ export default function VariableTextarea({
 }: VariableTextareaProps) {
   // Local copy of user updated value for popup
   const [value, setValue] = useState<string>(defaultValue)
-  const [popupButton, setPopupButton] = useState(!!(value?.length >= 70))
-
   const [opened, { open, close }] = useDisclosure(false)
 
   const updateValue = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.currentTarget.value)
     onChange && onChange(e)
-
-    setPopupButton(!!(e.currentTarget.value.length >= 70))
   }
 
   return (
@@ -57,15 +47,23 @@ export default function VariableTextarea({
         />
       </Modal>
 
-      <div className="variable-textarea">
+      <Box style={{ position: "relative" }}>
         <Textarea {...props} onChange={updateValue} value={value} />
 
-        {popupButton && (
-          <ActionIcon size="sm" onClick={open} aria-label="expand textarea">
-            <IconArrowsMaximize />
-          </ActionIcon>
-        )}
-      </div>
+        <ActionIcon
+          size="sm"
+          onClick={open}
+          aria-label="expand textarea"
+          style={{
+            position: "absolute",
+            right: "5%",
+            bottom: "5%",
+            marginBottom: "0.3rem",
+          }}
+        >
+          <IconArrowsMaximize />
+        </ActionIcon>
+      </Box>
     </>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/frontend/styles/globals.css b/packages/frontend/styles/globals.css
index a0fd14f3..aa71366e 100644
--- a/packages/frontend/styles/globals.css
+++ b/packages/frontend/styles/globals.css
@@ -41,23 +41,3 @@ span.limited,
 .mantine-Badge-root {
   max-width: 100%;
 }
-
-
-/* Popup textarea for prompt variables */
-.variable-textarea {
-  position: relative;
-}
-
-.variable-textarea > button {
-  bottom: .5rem;
-  right: 2rem;
-  position: absolute;
-  margin-bottom: 0.3rem;
-  background-color: rgba(121, 120, 120, 0.2);
-}
-
-.variable-textarea > div.mantine-Textarea-root {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
\ No newline at end of file

From 009682dd9b4ddda93cc6516ed91461542f57e7e8 Mon Sep 17 00:00:00 2001
From: 7HR4IZ3 <gamerxville@gmail.com>
Date: Wed, 19 Jun 2024 01:33:56 +0000
Subject: [PATCH 3/5] refactor: Removed dangerously set inner html property

Signed-off-by: 7HR4IZ3 <gamerxville@gmail.com>
---
 packages/frontend/components/SmartViewer/Message.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/components/SmartViewer/Message.tsx b/packages/frontend/components/SmartViewer/Message.tsx
index 2855963c..9421162f 100644
--- a/packages/frontend/components/SmartViewer/Message.tsx
+++ b/packages/frontend/components/SmartViewer/Message.tsx
@@ -237,9 +237,9 @@ function TextMessage({ data, onChange = () => {}, editable = false, codeBg }) {
             {...ghostTextAreaStyles}
           />
         </ProtectedText>
-        ) : (
-          <div style={{ width: "100%" }} dangerouslySetInnerHTML={{__html: data.content || data.text}}></div>
-        )}
+      ) : (
+        data.content || data.text
+      )}
     </Code>
   )
 }
@@ -591,4 +591,4 @@ export function BubbleMessage({ role, content, extra }) {
       <Space h="lg" />
     </>
   )
-}
\ No newline at end of file
+}

From 86addeda6ba0cd44d888e99530b9c9a566aee8f8 Mon Sep 17 00:00:00 2001
From: 7HR4IZ3 <gamerxville@gmail.com>
Date: Wed, 19 Jun 2024 01:37:08 +0000
Subject: [PATCH 4/5] refactor: Removed unused remove dependency

Signed-off-by: 7HR4IZ3 <gamerxville@gmail.com>
---
 packages/frontend/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index f2da1599..fda8b2a1 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -34,7 +34,6 @@
     "react-dom": "18.2.0",
     "react-json-view-lite": "^1.2.1",
     "recharts": "^2.12.7",
-    "remove": "^0.1.5",
     "shared": "*",
     "swr": "^2.2.4",
     "zod": "^3.22.4"

From 05ef81c4e93528e7cf2723e1b448694e27409526 Mon Sep 17 00:00:00 2001
From: hughcrt <chocart.hugues@icloud.com>
Date: Fri, 21 Jun 2024 16:08:50 -0300
Subject: [PATCH 5/5] good to go

---
 package-lock.json                             | 51 -------------------
 .../components/SmartViewer/Message.tsx        | 14 ++---
 .../prompts/PromptVariableEditor.tsx          | 46 +++++++----------
 .../components/prompts/VariableTextarea.tsx   | 44 ++++++++--------
 packages/frontend/package.json                |  2 +-
 5 files changed, 51 insertions(+), 106 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0501cd4d..dcf34878 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2505,17 +2505,6 @@
         }
       ]
     },
-    "node_modules/chainsaw": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
-      "integrity": "sha512-nG8PYH+/4xB+8zkV4G844EtfvZ5tTiLFoX3dZ4nhF4t3OCKIb9UvaFyNmeZO2zOSmRWzBoTD+napN6hiL+EgcA==",
-      "dependencies": {
-        "traverse": ">=0.3.0 <0.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3733,17 +3722,6 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
     },
-    "node_modules/hashish": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
-      "integrity": "sha512-xyD4XgslstNAs72ENaoFvgMwtv8xhiDtC2AtzCG+8yF7W/Knxxm9BX+e2s25mm+HxMKh0rBmXVOEGF3zNImXvA==",
-      "dependencies": {
-        "traverse": ">=0.2.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -5949,14 +5927,6 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
-    "node_modules/remove": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/remove/-/remove-0.1.5.tgz",
-      "integrity": "sha512-AJMA9oWvJzdTjwIGwSQZsjGQiRx73YTmiOWmfCp1fpLa/D4n7jKcpoA+CZiVLJqKcEKUuh1Suq80c5wF+L/qVQ==",
-      "dependencies": {
-        "seq": ">= 0.3.5"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -6156,18 +6126,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/seq": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
-      "integrity": "sha512-sisY2Ln1fj43KBkRtXkesnRHYNdswIkIibvNe/0UKm2GZxjMbqmccpiatoKr/k2qX5VKiLU8xm+tz/74LAho4g==",
-      "dependencies": {
-        "chainsaw": ">=0.0.7 <0.1",
-        "hashish": ">=0.0.2 <0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -6779,14 +6737,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/traverse": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -7409,7 +7359,6 @@
         "react-dom": "18.2.0",
         "react-json-view-lite": "^1.2.1",
         "recharts": "^2.12.7",
-        "remove": "^0.1.5",
         "shared": "*",
         "swr": "^2.2.4",
         "zod": "^3.22.4"
diff --git a/packages/frontend/components/SmartViewer/Message.tsx b/packages/frontend/components/SmartViewer/Message.tsx
index 9421162f..7c466b13 100644
--- a/packages/frontend/components/SmartViewer/Message.tsx
+++ b/packages/frontend/components/SmartViewer/Message.tsx
@@ -227,8 +227,8 @@ function ToolCallsMessage({
 function TextMessage({ data, onChange = () => {}, editable = false, codeBg }) {
   return (
     <Code block bg={codeBg}>
-      {editable ? (
-        <ProtectedText>
+      <ProtectedText>
+        {editable ? (
           <Textarea
             value={data.content || data.text}
             placeholder="Content"
@@ -236,10 +236,10 @@ function TextMessage({ data, onChange = () => {}, editable = false, codeBg }) {
             onChange={(e) => onChange({ ...data, content: e.target.value })}
             {...ghostTextAreaStyles}
           />
-        </ProtectedText>
-      ) : (
-        data.content || data.text
-      )}
+        ) : (
+          data.content || data.text
+        )}
+      </ProtectedText>
     </Code>
   )
 }
@@ -451,6 +451,8 @@ export function ChatMessage({
 
   // Add/remove the 'id' and 'name' props required on tool calls
   useEffect(() => {
+    if (!data) return
+
     // Add/remove the 'name' props required on tool calls
     if (data.role === "tool" && editable && typeof data.name !== "string") {
       onChange({ ...data, name: "some-tool-name" })
diff --git a/packages/frontend/components/prompts/PromptVariableEditor.tsx b/packages/frontend/components/prompts/PromptVariableEditor.tsx
index bb934342..8c44acbc 100644
--- a/packages/frontend/components/prompts/PromptVariableEditor.tsx
+++ b/packages/frontend/components/prompts/PromptVariableEditor.tsx
@@ -1,25 +1,17 @@
-import {
-  Badge,
-  Box,
-  Group,
-  Stack,
-  Text,
-  Textarea,
-  Tooltip,
-} from "@mantine/core"
+import { Badge, Box, Group, Stack, Text, Tooltip } from "@mantine/core"
 import { IconInfoCircle } from "@tabler/icons-react"
 import { TemplateVariables } from "shared"
-
 import VariableTextarea from "./VariableTextarea"
 
 export default function PromptVariableEditor({
-  value = {},
+  value: templateVariables = {},
   onChange,
 }: {
   value: TemplateVariables
   onChange: (value: TemplateVariables) => void
 }) {
-  const hasVariables = Object.keys(value).length > 0
+  const hasVariables = Object.keys(templateVariables).length > 0
+
   return (
     <Box>
       <Group mb="md" align="center" justify="space-between">
@@ -37,26 +29,25 @@ export default function PromptVariableEditor({
         </Text>
       )}
       <Stack mt="sm">
-        {Object.keys(value)
-          .sort()
-          .map((variable) => (
+        {Object.entries(templateVariables)
+          .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
+          .map(([name, value]) => (
             <Group
-              key={variable}
+              key={name}
               align="center"
               wrap="nowrap"
               justify="space-between"
               gap="lg"
             >
               <Badge
-                key={variable}
-                miw={30}
-                maw="34%"
-                miw={70}
-                px={0}
+                key={name}
+                miw={50}
+                maw={90}
+                px="sm"
                 variant="outline"
                 tt="none"
               >
-                {variable}
+                {name}
               </Badge>
               <VariableTextarea
                 size="xs"
@@ -64,14 +55,13 @@ export default function PromptVariableEditor({
                 required={true}
                 radius="sm"
                 rows={1}
-                autosize
-                maxRows={4}
-                name={variable}
-                defaultValue={value[variable]}
+                maxRows={1}
+                name={name}
+                value={value}
                 onChange={(e) =>
                   onChange({
-                    ...value,
-                    [variable]: e.currentTarget.value,
+                    ...templateVariables,
+                    [name]: e.currentTarget.value,
                   })
                 }
               />
diff --git a/packages/frontend/components/prompts/VariableTextarea.tsx b/packages/frontend/components/prompts/VariableTextarea.tsx
index d87d1204..0042e5a3 100644
--- a/packages/frontend/components/prompts/VariableTextarea.tsx
+++ b/packages/frontend/components/prompts/VariableTextarea.tsx
@@ -1,59 +1,63 @@
-import { Textarea, ActionIcon, TextareaProps, Modal, Box } from "@mantine/core"
-import { IconArrowsMaximize } from "@tabler/icons-react"
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Modal,
+  Text,
+  Textarea,
+  TextareaProps,
+  Title,
+} from "@mantine/core"
 import { useDisclosure } from "@mantine/hooks"
-import { ChangeEvent, useState } from "react"
+import { IconArrowsMaximize } from "@tabler/icons-react"
 
 type VariableTextareaProps = TextareaProps & {
   name: string
-  defaultValue: string
+  value: string
 }
 
 export default function VariableTextarea({
   name,
-  defaultValue,
+  value,
   onChange,
   ...props
 }: VariableTextareaProps) {
-  // Local copy of user updated value for popup
-  const [value, setValue] = useState<string>(defaultValue)
   const [opened, { open, close }] = useDisclosure(false)
 
-  const updateValue = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(e.currentTarget.value)
-    onChange && onChange(e)
-  }
-
   return (
     <>
       <Modal
         opened={opened}
         onClose={close}
-        title={name}
+        title={<Title order={3}>Edit variable</Title>}
         overlayProps={{
           backgroundOpacity: 0.55,
           blur: 3,
         }}
         size="xl"
       >
-        {/* Modal content */}
         <Textarea
-          size="lg"
-          required={true}
+          size="md"
           radius="sm"
+          minRows={2}
           rows={10}
           autosize
           value={value}
-          onChange={updateValue}
+          onChange={onChange}
         />
+
+        <Button my="md" style={{ float: "right" }} onClick={close}>
+          Save
+        </Button>
       </Modal>
 
       <Box style={{ position: "relative" }}>
-        <Textarea {...props} onChange={updateValue} value={value} />
-
+        <Textarea {...props} onChange={onChange} value={value} />
         <ActionIcon
-          size="sm"
+          size="xs"
           onClick={open}
           aria-label="expand textarea"
+          variant="transparent"
           style={{
             position: "absolute",
             right: "5%",
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index fda8b2a1..9f6a2fba 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -8,13 +8,13 @@
     "load-env": "bash ./load-env.sh"
   },
   "dependencies": {
-    "@mantine/charts": "7.10.0",
     "@mantine/core": "7.10.0",
     "@mantine/dates": "^7.10.0",
     "@mantine/form": "7.10.0",
     "@mantine/hooks": "7.10.0",
     "@mantine/modals": "7.10.0",
     "@mantine/notifications": "7.10.0",
+    "@mantine/charts": "7.10.0",
     "@sentry/nextjs": "^7.109.0",
     "@tabler/icons-react": "^2.46.0",
     "@tanstack/react-table": "^8.11.2",