added Meta Response Title Block above meta settings to discribe settings intent

This commit is contained in:
sherifButt 2024-03-21 06:36:25 +00:00
parent ca112130bd
commit b8573a7894
3 changed files with 58 additions and 44 deletions

View File

@ -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">

View File

@ -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") {

View File

@ -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>
);
}