From 88e809e40cf9a7a50efe5f990c9523f46dd5094b Mon Sep 17 00:00:00 2001
From: sherifButt <90522472+sherifButt@users.noreply.github.com>
Date: Thu, 21 Mar 2024 05:59:22 +0000
Subject: [PATCH] - linked settings with metaResponse Chat functionality

---
 .../Generic/Blocks/TitleBlock/index.jsx       |  60 +++++++++++
 .../src/components/WorkspaceChat/index.jsx    |  32 +++---
 .../FeatureSettings/EnableComponent/index.jsx |  29 +++++
 .../EnableSystemPrompt/index.jsx              |   0
 .../MetaResponse/FeatureSettings/index.jsx    | 100 ++++++++++++++++++
 .../MetaResponse/InputsFeature/index.jsx      |  18 ----
 .../WorkspaceSettings/MetaResponse/index.jsx  |  57 +++-------
 server/endpoints/workspaceMetaResponse.js     |   4 +
 server/endpoints/workspaces.js                |  11 ++
 9 files changed, 236 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
 create mode 100644 frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/EnableComponent/index.jsx
 rename frontend/src/pages/WorkspaceSettings/MetaResponse/{InputsFeature => FeatureSettings}/EnableSystemPrompt/index.jsx (100%)
 create mode 100644 frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/index.jsx
 delete mode 100644 frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx

diff --git a/frontend/src/components/Generic/Blocks/TitleBlock/index.jsx b/frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
new file mode 100644
index 00000000..8891b7f0
--- /dev/null
+++ b/frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
@@ -0,0 +1,60 @@
+import Badge from "@/components/Generic/Badges/Badge";
+import React from "react";
+
+export default function TitleBlock({
+  content, // toggle content goes here
+  label,
+  description,
+  badge = false,
+  badgeLabel,
+  badgeAnimated,
+  badgeBg,
+  border,
+  bg,
+  Icon,
+  labelStyles,
+}) {
+  const borderStyle = border ? "border border-gray-600 rounded-2xl p-4" : "";
+  const backgroundStyle = bg ? "bg-black/10" : "";
+
+  return (
+    <div
+      className={`relative w-full max-h-full ${borderStyle} ${backgroundStyle}`}
+    >
+      <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">
+              {Icon && <Icon className="w-16 h-16  text-white/30" />}
+              <div>
+                <div className="flex flex-row gap-4">
+                  <label
+                    className={`block ${
+                      labelStyles ? labelStyles : "input-label"
+                    }  mb-4 first-letter:capitalize `}
+                  >
+                    {label}
+                  </label>
+                  {badge && (
+                    <Badge
+                      showDot
+                      animated={badgeAnimated}
+                      label={badgeLabel}
+                      bg={badgeBg}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-between space-x-14">
+          <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+            {description}
+          </p>
+        </div>
+        {content}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx
index 1c31c7e6..de8b3d2c 100644
--- a/frontend/src/components/WorkspaceChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/index.jsx
@@ -6,6 +6,7 @@ import { useParams } from "react-router-dom";
 import ModalWrapper from "../ModalWrapper";
 import ChatContainer from "./ChatContainer";
 import LoadingChat from "./LoadingChat";
+import MetaResponse from "@/models/metaResponse";
 
 export default function WorkspaceChat({ loading, workspace }) {
   const { threadSlug = null } = useParams();
@@ -27,19 +28,26 @@ export default function WorkspaceChat({ loading, workspace }) {
         ? await Workspace.threads.chatHistory(workspace.slug, threadSlug)
         : await Workspace.chatHistory(workspace.slug);
 
-      // TODO: add conditional if dynamic input is enabled in the workspace by default is false
       // Append metadata to the chat history
-      if (isMetaInputs) {
-        chatHistory = chatHistory.map((message) => {
-          if (message.role === "assistant") {
-            const { remainingText, metaData } = extractMetaData(
-              message.content
-            );
-            setCurrentInputMeta(metaData);
-            return { ...message, content: remainingText, metaData };
-          }
-          return message;
-        });
+      if (workspace?.metaResponse) {
+        let metaResponseSettings = await MetaResponse.getMetaResponseSettings(
+          workspace.slug
+        );
+
+        console.log("meta Response Settings:", metaResponseSettings);
+        if (Object.values(metaResponseSettings).some((settings) => settings.isEnabled)
+        ) {
+          chatHistory = chatHistory.map((message) => {
+            if (message.role === "assistant") {
+              const { remainingText, metaData } = extractMetaData(
+                message.content
+              );
+              setCurrentInputMeta(metaData);
+              return { ...message, content: remainingText, metaData };
+            }
+            return message;
+          });
+        }
       }
 
       setHistory(chatHistory);
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/EnableComponent/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/EnableComponent/index.jsx
new file mode 100644
index 00000000..a31da2dc
--- /dev/null
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/EnableComponent/index.jsx
@@ -0,0 +1,29 @@
+import ToggleBlock from "@/components/Generic/Blocks/ToggleBlock";
+
+export default function EnableComponent({
+  component,
+  isEnabled,
+  description,
+  onToggle,
+  Icon,
+  content,
+  disabled,
+  bg,
+}) {
+  return (
+    <div className="relative w-full max-h-full ">
+      <ToggleBlock
+        initialChecked={isEnabled}
+        label={isEnabled ? `${component} is Enabled` : `Enable ${component}`}
+        onToggle={onToggle}
+        name={component}
+        description={description}
+        border
+        Icon={Icon}
+        content={content}
+        disabled={disabled}
+        bg={bg}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/EnableSystemPrompt/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/EnableSystemPrompt/index.jsx
similarity index 100%
rename from frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/EnableSystemPrompt/index.jsx
rename to frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/EnableSystemPrompt/index.jsx
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/index.jsx
new file mode 100644
index 00000000..d2711d82
--- /dev/null
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/FeatureSettings/index.jsx
@@ -0,0 +1,100 @@
+import TextAreaBlock from "@/components/Generic/Blocks/TextAreaBlock";
+import EnableSystemPrompt from "./EnableSystemPrompt";
+import CheckBoxBlock from "@/components/Generic/Blocks/CheckBoxBlock";
+import TitleBlock from "@/components/Generic/Blocks/TitleBlock";
+import ToggleBlock from "@/components/Generic/Blocks/ToggleBlock";
+import TextArea from "@/components/Generic/Inputs/TextArea";
+
+export default function FeatureSettings({
+  workspace,
+  settings,
+  onUpdateSettings,
+}) {
+  return (
+    <div className="flex flex-col gap-2 mt-4 pt-8 border-t-2 border-white/10">
+      <EnableSystemPrompt
+        workspace={workspace}
+        settings={settings}
+        onUpdateSettings={onUpdateSettings}
+      />
+      {settings.config.systemPrompt.isEnabled && (
+        <>
+          <TextAreaBlock workspace={workspace} />
+          <CheckBoxBlock
+            workspace={workspace}
+            label="override workspace prompt"
+            inline
+            name="systemPrompt"
+          />
+        </>
+      )}
+      <TitleBlock
+        label="Prompt-schema"
+        description="Define the schema context and instructions for the AI to generate a response. You should to provide a carefully crafted prompt so the AI can generate a relevant and accurate response."
+      />
+      <TextArea
+        name="openAiPrompt"
+        defaultValue={settings.config.openAiPrompt}
+        placeholder="Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed."
+        onChange={(e) =>
+          onUpdateSettings({
+            ...settings,
+            config: {
+              ...settings.config,
+              openAiPrompt: e.target.value,
+            },
+          })
+        }
+      />
+      <TitleBlock
+        label="Components"
+        description="Select components for your schema, if you have specified a drop-down menu schema chose the drop-down menu component and remove the rest to get consistent results."
+        labelStyles="text-md font-bold text-white"
+      />
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+        {Object.keys(settings.config.components).map((component, index) => {
+          const componentLabel = component
+            .split(/(?=[A-Z])/)
+            .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+            .join(" ");
+          const _componentLabel = settings.config.components[component]
+            .isEnabled
+            ? `${componentLabel} (Enabled)`
+            : `Enable ${componentLabel}`;
+          const handleComponentUpdate = (enabled) => {
+            onUpdateSettings({
+              ...settings,
+              config: {
+                ...settings.config,
+                components: {
+                  ...settings.config.components,
+                  [component]: {
+                    ...settings.config.components[component],
+                    isEnabled: enabled,
+                  },
+                },
+              },
+            });
+            showToast(
+              `${componentLabel} has been ${enabled ? "enabled" : "disabled"}`,
+              "success",
+              { clear: true }
+            );
+          };
+          return (
+            <div key={component}>
+              <ToggleBlock
+                initialChecked={settings.config.components[component].isEnabled}
+                label={_componentLabel}
+                onToggle={handleComponentUpdate}
+                name={component}
+                description={settings.config.components[component].description}
+                inline
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx
deleted file mode 100644
index 70d3754c..00000000
--- a/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import TextAreaBlock from "@/components/Generic/Blocks/TextAreaBlock";
-import EnableSystemPrompt from "./EnableSystemPrompt";
-import CheckBoxBlock from "@/components/Generic/Blocks/CheckBoxBlock";
-
-export default function InputsFeature({ workspace, config }) {
-  return (
-    <div className="flex flex-col gap-4 mt-4">
-      <EnableSystemPrompt workspace={workspace} config={config} />
-      <TextAreaBlock workspace={workspace} />
-      <CheckBoxBlock
-        workspace={workspace}
-        label="override workspace prompt"
-        inline
-        name="systemPrompt"
-      />
-    </div>
-  );
-}
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
index ac8b034a..f928aa0c 100644
--- a/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
@@ -1,12 +1,9 @@
 import MetaResponse from "@/models/metaResponse";
+import showToast from "@/utils/toast";
 import { ChatText, Heart, UserCircle } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 import EnableFeatures from "./EnableFeatures";
-// import InputsFeature from "./InputsFeature";
-import EnableSystemPrompt from "./InputsFeature/EnableSystemPrompt";
-import TextAreaBlock from "@/components/Generic/Blocks/TextAreaBlock";
-import CheckBoxBlock from "@/components/Generic/Blocks/CheckBoxBlock";
-import showToast from "@/utils/toast";
+import FeatureSettings from "./FeatureSettings";
 
 export default function MetaResponseSettings({ workspace }) {
   const [settings, setSettings] = useState({});
@@ -66,23 +63,22 @@ export default function MetaResponseSettings({ workspace }) {
     avatars: UserCircle,
   };
 
-  const mapFeatures = {
-    inputs: InputsFeature,
-  };
-
+  //   const mapFeatures = {
+  //     inputs: InputsFeature,
+  //     sentiments: InputsFeature,
+  //     avatars: InputsFeature,
+  //   };
 
   return (
-    <div className="relative w-full gap-4 max-h-full grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3">
+    <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];
+        // const FeatureComponent = mapFeatures[feature];
         return (
           <div
             key={feature}
-            className={
-              featureSettings.isEnabled ? "lg:col-span-2 2xl:col-span-3" : ""
-            }
+            className={featureSettings.isEnabled ? "lg:col-span-2 " : ""}
           >
             <EnableFeatures
               feature={feature}
@@ -95,9 +91,8 @@ export default function MetaResponseSettings({ workspace }) {
               disabled={!workspace.metaResponse}
               Icon={IconComponent}
               content={
-                featureSettings.isEnabled &&
-                FeatureComponent && (
-                  <FeatureComponent
+                featureSettings.isEnabled && (
+                  <FeatureSettings
                     workspace={workspace}
                     feature={feature}
                     config={featureSettings.config}
@@ -119,31 +114,3 @@ export default function MetaResponseSettings({ workspace }) {
     </div>
   );
 }
-
-/*export default*/ function InputsFeature({
-  workspace,
-  feature,
-  settings,
-  onUpdateSettings,
-}) {
-  return (
-    <div className="flex flex-col gap-2 mt-4">
-      <EnableSystemPrompt
-        workspace={workspace}
-        settings={settings}
-        onUpdateSettings={onUpdateSettings}
-      />
-      {settings.config.systemPrompt.isEnabled && (
-        <>
-          <TextAreaBlock workspace={workspace} />
-          <CheckBoxBlock
-            workspace={workspace}
-            label="override workspace prompt"
-            inline
-            name="systemPrompt"
-          />
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/server/endpoints/workspaceMetaResponse.js b/server/endpoints/workspaceMetaResponse.js
index dcbcacba..95e08160 100644
--- a/server/endpoints/workspaceMetaResponse.js
+++ b/server/endpoints/workspaceMetaResponse.js
@@ -251,19 +251,23 @@ const metaResponseDefaultSettings = {
         dropDownMenu: {
           isEnabled: false,
           options: [],
+          description: "Drop Down menu best to select  between functional derisions, ie: continue, Repeat or Move to a new sequence.. etc",
 
         },
         optionsList: {
           isEnabled: false,
           options: [],
+          description: "Best suited  for expansion on a topic",
         },
         optionsButtons: {
           isEnabled: false,
           options: [],
+          description: "Chat will provide answers with the LLM's general knowledge and document context that is found.",
         },
         multiSelectCheckboxes: {
           isEnabled: false,
           options: [],
+          description: "Chat will provide answers with the LLM's general knowledge and document context that is found.",
         },
       },
     },
diff --git a/server/endpoints/workspaces.js b/server/endpoints/workspaces.js
index 8ebac42d..07a0acb5 100644
--- a/server/endpoints/workspaces.js
+++ b/server/endpoints/workspaces.js
@@ -616,24 +616,33 @@ const metaResponseDefaultSettings = {
         dropDownMenu: {
           isEnabled: false,
           options: [],
+          description: "Drop Down menu best to select  between functional derisions, ie: continue, Repeat or Move to a new sequence.. etc",
+          infoLink: "https://docs.anythingllm.com/docs/meta-response/inputs/dropdown-menu",
 
         },
         optionsList: {
           isEnabled: false,
           options: [],
+          description: "Best suited  for expansion on a topic",
+          infoLink: "https://docs.anythingllm.com/docs/meta-response/inputs/options-list",
         },
         optionsButtons: {
           isEnabled: false,
           options: [],
+          description: "Chat will provide answers with the LLM's general knowledge and document context that is found.",
+          infoLink: "https://docs.anythingllm.com/docs/meta-response/inputs/options-buttons",
         },
         multiSelectCheckboxes: {
           isEnabled: false,
           options: [],
+          description: "Chat will provide answers with the LLM's general knowledge and document context that is found.",
+          infoLink: "https://docs.anythingllm.com/docs/meta-response/inputs/multi-select-checkboxes",
         },
       },
     },
     permissions: ["user"],
     description: "Traditionally, interaction with AnythingLLM occurs through a text area. Meta Inputs enhance this by offering alternative interaction methods, including option buttons, multi-select checkboxes, sliders, drop-down menus, and date/time selectors. To utilize these components, you'll need to guide the LLM on incorporating them into its responses with a specific schema",
+    infoLink: "https://docs.anythingllm.com/docs/meta-response/inputs",
   },
   sentiments: {
     isEnabled: false,
@@ -684,6 +693,7 @@ const metaResponseDefaultSettings = {
     },
     permissions: ["user"],
     description: "Activate to enable the AI to analyze and adapt its responses based on the emotional tone of the conversation, enhancing interaction personalization",
+    infoLink: "https://docs.anythingllm.com/docs/meta-response/sentiments",
   },
   avatars: {
     isEnabled: false,
@@ -734,6 +744,7 @@ const metaResponseDefaultSettings = {
     },
     permissions: ["user"],
     description: "Enable avatars to reflect user sentiments, allowing the AI to visually empathize and convey understanding through changes in its profile image based on the meta object's sentiment data.",
+    infoLink: "https://docs.anythingllm.com/docs/meta-response/avatars",
   },
 };