From b8573a7894c36750b1ead4807c933056951256fe Mon Sep 17 00:00:00 2001
From: sherifButt <90522472+sherifButt@users.noreply.github.com>
Date: Thu, 21 Mar 2024 06:36:25 +0000
Subject: [PATCH] added Meta Response Title Block above meta settings to
 discribe settings intent

---
 .../Generic/Blocks/TitleBlock/index.jsx       |  2 +-
 .../src/components/WorkspaceChat/index.jsx    |  5 +-
 .../WorkspaceSettings/MetaResponse/index.jsx  | 95 +++++++++++--------
 3 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/Generic/Blocks/TitleBlock/index.jsx b/frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
index 8891b7f0..b4722094 100644
--- a/frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
+++ b/frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
@@ -24,7 +24,7 @@ export default function TitleBlock({
       <div className="relative rounded-lg">
         <div className="space-y-6 flex h-full w-full">
           <div className="w-full flex flex-col gap-y-4">
-            <div className="flex gap-4">
+            <div className={`flex ${Icon ? "gap-4" : ""}`}>
               {Icon && <Icon className="w-16 h-16  text-white/30" />}
               <div>
                 <div className="flex flex-row gap-4">
diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx
index de8b3d2c..739d1b89 100644
--- a/frontend/src/components/WorkspaceChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/index.jsx
@@ -35,7 +35,10 @@ export default function WorkspaceChat({ loading, workspace }) {
         );
 
         console.log("meta Response Settings:", metaResponseSettings);
-        if (Object.values(metaResponseSettings).some((settings) => settings.isEnabled)
+        if (
+          Object.values(metaResponseSettings).some(
+            (settings) => settings.isEnabled
+          )
         ) {
           chatHistory = chatHistory.map((message) => {
             if (message.role === "assistant") {
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
index f928aa0c..599f8688 100644
--- a/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
@@ -1,9 +1,10 @@
 import MetaResponse from "@/models/metaResponse";
 import showToast from "@/utils/toast";
-import { ChatText, Heart, UserCircle } from "@phosphor-icons/react";
+import { ChatText, Cube, Heart, UserCircle } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 import EnableFeatures from "./EnableFeatures";
 import FeatureSettings from "./FeatureSettings";
+import TitleBlock from "@/components/Generic/Blocks/TitleBlock";
 
 export default function MetaResponseSettings({ workspace }) {
   const [settings, setSettings] = useState({});
@@ -70,47 +71,57 @@ export default function MetaResponseSettings({ workspace }) {
   //   };
 
   return (
-    <div className="relative w-full gap-4 max-h-full grid grid-cols-1 lg:grid-cols-2  2xl:max-w-6xl ">
-      {Object.keys(settings).map((feature) => {
-        const featureSettings = settings[feature];
-        const IconComponent = mapIcons[feature];
-        // const FeatureComponent = mapFeatures[feature];
-        return (
-          <div
-            key={feature}
-            className={featureSettings.isEnabled ? "lg:col-span-2 " : ""}
-          >
-            <EnableFeatures
-              feature={feature}
-              isEnabled={featureSettings.isEnabled}
-              description={featureSettings.description}
-              onToggle={(enabled) =>
-                workspace.metaResponse &&
-                handleToggleEnableFeatures(feature, enabled)
-              }
-              disabled={!workspace.metaResponse}
-              Icon={IconComponent}
-              content={
-                featureSettings.isEnabled && (
-                  <FeatureSettings
-                    workspace={workspace}
-                    feature={feature}
-                    config={featureSettings.config}
-                    settings={featureSettings}
-                    onUpdateSettings={(updatedFeatureSettings) =>
-                      handleUpdateFeatureSettings(
-                        feature,
-                        updatedFeatureSettings
-                      )
-                    }
-                  />
-                )
-              }
-              bg={featureSettings.isEnabled}
-            />
-          </div>
-        );
-      })}
+    <div className="flex flex-col gap-4 max-w-3xl">
+      <div className="px-4">
+        <TitleBlock
+          label="Meta Response"
+          description="This feature lets you dictate app behaviour through AI-generated responses, using a specific schema to structure data. It aligns with specially designed components that interpret this schema, enabling custom configurations for managing these components efficiently."
+          labelStyles="text-2xl font-bold text-white"
+          Icon={Cube}
+        />
+      </div>
+      <div className="relative w-full gap-4 max-h-full grid grid-cols-1 lg:grid-cols-2  ">
+        {Object.keys(settings).map((feature) => {
+          const featureSettings = settings[feature];
+          const IconComponent = mapIcons[feature];
+          // const FeatureComponent = mapFeatures[feature];
+          return (
+            <div
+              key={feature}
+              className={featureSettings.isEnabled ? "lg:col-span-2 " : ""}
+            >
+              <EnableFeatures
+                feature={feature}
+                isEnabled={featureSettings.isEnabled}
+                description={featureSettings.description}
+                onToggle={(enabled) =>
+                  workspace.metaResponse &&
+                  handleToggleEnableFeatures(feature, enabled)
+                }
+                disabled={!workspace.metaResponse}
+                Icon={IconComponent}
+                content={
+                  featureSettings.isEnabled && (
+                    <FeatureSettings
+                      workspace={workspace}
+                      feature={feature}
+                      config={featureSettings.config}
+                      settings={featureSettings}
+                      onUpdateSettings={(updatedFeatureSettings) =>
+                        handleUpdateFeatureSettings(
+                          feature,
+                          updatedFeatureSettings
+                        )
+                      }
+                    />
+                  )
+                }
+                bg={featureSettings.isEnabled}
+              />
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }