feat: TTD dialog tweaks (#7346)

* tweaks to TTD dialog ~ prepping for settings dialog

* tweaks to ttd parsing & error logging

src/components/TTDDialog/TTDDialog.tsx

@@ -72,7 +72,7 @@ export const TTDDialogBase = withInternalFallback(
     tab,
     ...rest
   }: {
-    tab: string;
+    tab: "text-to-diagram" | "mermaid";
   } & (
     | {
         onTextSubmit(value: string): Promise<OnTestSubmitRetValue>;
@@ -150,11 +150,19 @@ export const TTDDialogBase = withInternalFallback(
             data,
             mermaidToExcalidrawLib,
             setError,
-            text: generatedResponse,
+            mermaidDefinition: generatedResponse,
           });
           trackEvent("ai", "mermaid parse success", "ttd");
           saveMermaidDataToStorage(generatedResponse);
         } catch (error: any) {
+          console.info(
+            `%cTTD mermaid render errror: ${error.message}`,
+            "color: red",
+          );
+          console.info(
+            `>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>\nTTD mermaid definition render errror: ${error.message}`,
+            "color: yellow",
+          );
           trackEvent("ai", "mermaid parse failed", "ttd");
           setError(
             new Error(
@@ -206,17 +214,34 @@ export const TTDDialogBase = withInternalFallback(
           app.setOpenDialog(null);
         }}
         size={1200}
-        title=""
+        title={false}
         {...rest}
         autofocus={false}
       >
-        <TTDDialogTabs tab={tab}>
+        <TTDDialogTabs dialog="ttd" tab={tab}>
           {"__fallback" in rest && rest.__fallback ? (
             <p className="dialog-mermaid-title">{t("mermaid.title")}</p>
           ) : (
             <TTDDialogTabTriggers>
               <TTDDialogTabTrigger tab="text-to-diagram">
-                {t("labels.textToDiagram")}
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  {t("labels.textToDiagram")}
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: "1px 6px",
+                      marginLeft: "10px",
+                      fontSize: 10,
+                      borderRadius: "12px",
+                      background: "pink",
+                      color: "#000",
+                    }}
+                  >
+                    AI Beta
+                  </div>
+                </div>
               </TTDDialogTabTrigger>
               <TTDDialogTabTrigger tab="mermaid">Mermaid</TTDDialogTabTrigger>
             </TTDDialogTabTriggers>