From 2abc0d2fb473a57f15d9e21dd895fe2d7364b817 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 7 Aug 2023 20:28:41 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(formModal/index.tsx):=20hand?=
 =?UTF-8?q?le=20case=20when=20tabsState=20or=20formKeysData=20is=20undefin?=
 =?UTF-8?q?ed=20to=20prevent=20errors=20=E2=9C=A8=20feat(formModal/index.t?=
 =?UTF-8?q?sx):=20add=20support=20for=20displaying=20input=20keys=20and=20?=
 =?UTF-8?q?handling=20input=20changes=20in=20the=20form=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/formModal/index.tsx | 139 ++++++++++----------
 1 file changed, 72 insertions(+), 67 deletions(-)

diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 751eacea1..81b15559c 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -67,14 +67,17 @@ export default function FormModal({
   const id = useRef(flow.id);
   const tabsStateFlowId = tabsState[flow.id];
   const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData;
-  const [chatKey, setChatKey] = useState(
-    Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
-      (k) =>
-        !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) &&
-        tabsState[flow.id].formKeysData.input_keys[k] === ""
-    )
-  );
-
+  const [chatKey, setChatKey] = useState(() => {
+    if (tabsState[flow.id]?.formKeysData?.input_keys) {
+      return Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
+        (k) =>
+          !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) &&
+          tabsState[flow.id].formKeysData.input_keys[k] === ""
+      );
+    }
+    // TODO: return a sensible default
+    return "";
+  });
   useEffect(() => {
     if (messagesRef.current) {
       messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
@@ -419,68 +422,70 @@ export default function FormModal({
                 </div>
               </div>
 
-              {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
-                (i, k) => (
-                  <div className="file-component-accordion-div" key={k}>
-                    <AccordionComponent
-                      trigger={
-                        <div className="file-component-badge-div">
-                          <Badge variant="gray" size="md">
-                            {i}
-                          </Badge>
+              {tabsState[id.current]?.formKeysData?.input_keys
+                ? Object.keys(
+                    tabsState[id.current].formKeysData.input_keys
+                  ).map((i, k) => (
+                    <div className="file-component-accordion-div" key={k}>
+                      <AccordionComponent
+                        trigger={
+                          <div className="file-component-badge-div">
+                            <Badge variant="gray" size="md">
+                              {i}
+                            </Badge>
 
-                          <div
-                            className="-mb-1"
-                            onClick={(event) => {
-                              event.stopPropagation();
+                            <div
+                              className="-mb-1"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                              }}
+                            >
+                              <ToggleShadComponent
+                                enabled={chatKey === i}
+                                setEnabled={(value) =>
+                                  handleOnCheckedChange(value, i)
+                                }
+                                size="small"
+                                disabled={tabsState[
+                                  id.current
+                                ].formKeysData.handle_keys.some((t) => t === i)}
+                              />
+                            </div>
+                          </div>
+                        }
+                        key={k}
+                        keyValue={i}
+                      >
+                        <div className="file-component-tab-column">
+                          {tabsState[id.current].formKeysData.handle_keys.some(
+                            (t) => t === i
+                          ) && (
+                            <div className="font-normal text-muted-foreground ">
+                              Source: Component
+                            </div>
+                          )}
+                          <Textarea
+                            className="custom-scroll"
+                            value={
+                              tabsState[id.current].formKeysData.input_keys[i]
+                            }
+                            onChange={(e) => {
+                              setTabsState((old) => {
+                                let newTabsState = _.cloneDeep(old);
+                                newTabsState[
+                                  id.current
+                                ].formKeysData.input_keys[i] = e.target.value;
+                                return newTabsState;
+                              });
                             }}
-                          >
-                            <ToggleShadComponent
-                              enabled={chatKey === i}
-                              setEnabled={(value) =>
-                                handleOnCheckedChange(value, i)
-                              }
-                              size="small"
-                              disabled={tabsState[
-                                id.current
-                              ].formKeysData.handle_keys.some((t) => t === i)}
-                            />
-                          </div>
+                            disabled={chatKey === i}
+                            placeholder="Enter text..."
+                          ></Textarea>
                         </div>
-                      }
-                      key={k}
-                      keyValue={i}
-                    >
-                      <div className="file-component-tab-column">
-                        {tabsState[id.current].formKeysData.handle_keys.some(
-                          (t) => t === i
-                        ) && (
-                          <div className="font-normal text-muted-foreground ">
-                            Source: Component
-                          </div>
-                        )}
-                        <Textarea
-                          className="custom-scroll"
-                          value={
-                            tabsState[id.current].formKeysData.input_keys[i]
-                          }
-                          onChange={(e) => {
-                            setTabsState((old) => {
-                              let newTabsState = _.cloneDeep(old);
-                              newTabsState[id.current].formKeysData.input_keys[
-                                i
-                              ] = e.target.value;
-                              return newTabsState;
-                            });
-                          }}
-                          disabled={chatKey === i}
-                          placeholder="Enter text..."
-                        ></Textarea>
-                      </div>
-                    </AccordionComponent>
-                  </div>
-                )
-              )}
+                      </AccordionComponent>
+                    </div>
+                  ))
+                : null}
               {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
                 <div className="file-component-accordion-div" key={k}>
                   <AccordionComponent