mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-06-24 07:40:07 +02:00
- linked settings with metaResponse Chat functionality
This commit is contained in:
sherifButt
parent
adaa8b6a7b
commit
88e809e40c
60
frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
Normal file
60
frontend/src/components/Generic/Blocks/TitleBlock/index.jsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user