mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-16 11:20:10 +01:00
- enhanced TextAreaBlock functionality by adding expand icon, save upon change button, expand while typing
This commit is contained in:
sherifButt
parent
b8573a7894
commit
5318b599b7
@ -3,10 +3,20 @@ import React from "react";
|
||||
// Updated utility function for dark theme
|
||||
const colorMapping = (bg) => {
|
||||
const mappings = {
|
||||
"emerald-600": { text: "text-emerald-100", icon: "text-emerald-200 group-hover:text-emerald-50" },
|
||||
"bg-green-500": {
|
||||
text: "text-green-400",
|
||||
icon: "text-green-600 group-hover:text-green-50",
|
||||
ring: "ring-1 ring-inset ring-green-500/20",
|
||||
},
|
||||
};
|
||||
|
||||
return mappings[bg] || { text: "text-gray-100", icon: "text-gray-200" };
|
||||
return (
|
||||
mappings[bg] || {
|
||||
text: "text-white/60",
|
||||
icon: "text-white/80 group-hover:text-white/50",
|
||||
ring: "ring-1 ring-inset ring-gray-500/20",
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Badge Component
|
||||
@ -18,18 +28,21 @@ export default function Badge({
|
||||
shadow = "none", // "none", "sm", "md", "lg", "xl"
|
||||
showDot = false,
|
||||
showClose = false,
|
||||
bg = "emerald-600",
|
||||
bg = "bg-green-500",
|
||||
animated = false,
|
||||
onClose = () => {}, // Callback for close icon
|
||||
}) {
|
||||
// Adjustments based on props
|
||||
const { text: textColor, icon: iconColor } = colorMapping(bg);
|
||||
const {
|
||||
text: textColor,
|
||||
icon: iconColor,
|
||||
ring: ringClasses,
|
||||
} = colorMapping(bg);
|
||||
const animatedClasses = animated ? "animate-pulse" : "";
|
||||
const sizeClasses = {
|
||||
sm: "py-0.5 pl-2 pr-0.5 text-xs",
|
||||
md: "py-1 pl-2 pr-1 text-sm",
|
||||
lg: "py-1 px-3 text-sm",
|
||||
xl: "py-1.5 px-4 text-base",
|
||||
sm: "py-0.5 px-2 pr-0.5 text-xs",
|
||||
md: "py-1.5 px-2 pr-1 text-xs",
|
||||
lg: "py-2 px-3 text-sm",
|
||||
xl: "py-2.5 px-4 text-base",
|
||||
}[size];
|
||||
const iconSizeClasses = {
|
||||
sm: "h-2 w-2",
|
||||
@ -51,7 +64,7 @@ export default function Badge({
|
||||
lg: "shadow-lg",
|
||||
xl: "shadow-xl",
|
||||
}[shadow];
|
||||
const backgroundClasses = `bg-${bg}`;
|
||||
const backgroundClasses = `${bg} bg-opacity-10 hover:bg-opacity-20`;
|
||||
|
||||
// SVG Icons
|
||||
const DotIcon = () => (
|
||||
@ -78,14 +91,14 @@ export default function Badge({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-row gap-0.5 w-fit h-fit justify-center items-center group ${sizeClasses} ${backgroundClasses} ${roundedClasses} ${shadowClasses}`}
|
||||
className={`flex flex-row gap-0.5 w-fit h-fit justify-center items-center group ${sizeClasses} ${backgroundClasses} ${roundedClasses} ${shadowClasses} ${ringClasses}`}
|
||||
>
|
||||
{showDot && (
|
||||
<div>
|
||||
<DotIcon />
|
||||
</div>
|
||||
)}
|
||||
<p className={`block text-center font-medium px-1 ${textColor}`}>
|
||||
<p className={`block text-center font-medium pr-2 pl-1 ${textColor}`}>
|
||||
{label}
|
||||
</p>
|
||||
{showClose && (
|
||||
@ -98,4 +111,4 @@ export default function Badge({
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -31,16 +31,10 @@ export default function CheckBoxBlock({
|
||||
badgeBg,
|
||||
border,
|
||||
Icon,
|
||||
contentLocation,
|
||||
disabled,
|
||||
inline = false,
|
||||
}) {
|
||||
const borderStyle = border ? "border border-gray-600 rounded-2xl p-4" : "";
|
||||
const contentPosition = {
|
||||
middle: "middle",
|
||||
top: "top",
|
||||
bottom: "bottom",
|
||||
}[contentLocation];
|
||||
|
||||
return (
|
||||
<div className={`relative w-full max-h-full ${borderStyle}`}>
|
||||
|
||||
@ -13,6 +13,8 @@ export default function TextAreaBlock({
|
||||
className,
|
||||
autoComplete,
|
||||
wrap,
|
||||
code,
|
||||
onSave,
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
@ -39,6 +41,8 @@ export default function TextAreaBlock({
|
||||
className={className}
|
||||
autoComplete={autoComplete}
|
||||
wrap={wrap}
|
||||
code={code}
|
||||
onSave={onSave}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -13,28 +13,34 @@ export default function TitleBlock({
|
||||
bg,
|
||||
Icon,
|
||||
labelStyles,
|
||||
divider,
|
||||
}) {
|
||||
const borderStyle = border ? "border border-gray-600 rounded-2xl p-4" : "";
|
||||
const backgroundStyle = bg ? "bg-black/10" : "";
|
||||
const dividerStyle = divider
|
||||
? "pb-4 mb-8 border-white/10 border-b-2"
|
||||
: "pb-2";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative w-full max-h-full ${borderStyle} ${backgroundStyle}`}
|
||||
className={`relative w-full max-h-full flex flex-col gap-y-1 ${dividerStyle} ${borderStyle} ${backgroundStyle}`}
|
||||
>
|
||||
<div className="relative rounded-lg">
|
||||
<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 ${Icon ? "gap-4" : ""}`}>
|
||||
{Icon && <Icon className="w-16 h-16 text-white/30" />}
|
||||
{Icon && <Icon className="w-9 h-9 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>
|
||||
{label && (
|
||||
<label
|
||||
className={`block ${
|
||||
labelStyles ? labelStyles : "input-label"
|
||||
} mb-2.5 first-letter:capitalize `}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
{badge && (
|
||||
<Badge
|
||||
showDot
|
||||
@ -49,9 +55,7 @@ export default function TitleBlock({
|
||||
</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>
|
||||
<p className="text-white/60 text-xs py-1.5">{description}</p>
|
||||
</div>
|
||||
{content}
|
||||
</div>
|
||||
|
||||
@ -30,7 +30,7 @@ export default function ToggleBlock({
|
||||
<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 gap-2">
|
||||
{Icon && <Icon className="w-16 h-16 text-white/30" />}
|
||||
<div>
|
||||
<div className="flex flex-row gap-4">
|
||||
@ -44,7 +44,7 @@ export default function ToggleBlock({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<label className="block input-label mb-4 first-letter:capitalize">
|
||||
<label className="block input-label mb-1 first-letter:capitalize">
|
||||
{label}
|
||||
</label>
|
||||
{badge && (
|
||||
@ -57,21 +57,21 @@ export default function ToggleBlock({
|
||||
)}
|
||||
</div>
|
||||
{!inline && (
|
||||
<ToggleButton
|
||||
initialChecked={initialChecked}
|
||||
onToggle={onToggle}
|
||||
name={name}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className="mt-2">
|
||||
<ToggleButton
|
||||
initialChecked={initialChecked}
|
||||
onToggle={onToggle}
|
||||
name={name}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</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>
|
||||
<p className="text-white/60 text-xs py-1.5">{description}</p>
|
||||
</div>
|
||||
{content}
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
export default function CheckBox({ initialChecked, onToggle, name, disabled }) {
|
||||
export default function CheckBox({
|
||||
initialChecked = false,
|
||||
onToggle,
|
||||
name,
|
||||
disabled,
|
||||
}) {
|
||||
const [isChecked, setIsChecked] = useState(initialChecked);
|
||||
|
||||
useEffect(() => {
|
||||
setIsChecked(initialChecked);
|
||||
}, [initialChecked]);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { ArrowsIn, ArrowsOut, Check } from "@phosphor-icons/react";
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
|
||||
export default function TextArea({
|
||||
defaultValue,
|
||||
@ -11,44 +12,121 @@ export default function TextArea({
|
||||
className = "",
|
||||
autoComplete = "off",
|
||||
wrap = "soft",
|
||||
code = false,
|
||||
onSave,
|
||||
}) {
|
||||
const [rows, setRows] = useState(initialRows);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [showExpandIcon, setShowExpandIcon] = useState(false);
|
||||
const [content, setContent] = useState(defaultValue);
|
||||
const [showSaveButton, setShowSaveButton] = useState(false);
|
||||
const textAreaRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
adjustRowsToFitContent();
|
||||
// Initial check to determine if the expand icon should be shown
|
||||
checkForOverflow();
|
||||
}, [defaultValue]);
|
||||
|
||||
const toggleExpansion = () => {
|
||||
setIsExpanded(!isExpanded);
|
||||
if (!isExpanded) {
|
||||
adjustRowsToFitContent(true);
|
||||
} else {
|
||||
setRows(initialRows);
|
||||
}
|
||||
// After toggling, check again to see if the content overflows
|
||||
setTimeout(checkForOverflow, 0); // Timeout ensures the DOM updates are applied
|
||||
};
|
||||
|
||||
const adjustRowsToFitContent = (forceExpand = false) => {
|
||||
const textarea = textAreaRef.current;
|
||||
if (textarea) {
|
||||
const lineHeight = 18; // Match this with your CSS
|
||||
if (forceExpand || isExpanded) {
|
||||
const currentRows = Math.ceil(textarea.scrollHeight / lineHeight);
|
||||
setRows(currentRows);
|
||||
}
|
||||
checkForOverflow();
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (onChange) {
|
||||
onChange(e);
|
||||
}
|
||||
|
||||
// Dynamically adjust rows
|
||||
const textareaLineHeight = 24;
|
||||
const previousRows = e.target.rows;
|
||||
e.target.rows = initialRows;
|
||||
|
||||
const currentRows = ~~(e.target.scrollHeight / textareaLineHeight);
|
||||
|
||||
if (currentRows === previousRows) {
|
||||
e.target.rows = currentRows;
|
||||
}
|
||||
|
||||
if (e.target.scrollHeight > e.target.clientHeight) {
|
||||
e.target.rows = currentRows;
|
||||
}
|
||||
|
||||
setRows(currentRows);
|
||||
adjustRowsToFitContent();
|
||||
setContent(e.target.value);
|
||||
setShowSaveButton(true);
|
||||
};
|
||||
|
||||
// Function to determine if the expand/collapse icon should be shown
|
||||
const checkForOverflow = () => {
|
||||
const textarea = textAreaRef.current;
|
||||
if (textarea) {
|
||||
// Check if the content overflows
|
||||
const isOverflowing = textarea.scrollHeight > textarea.clientHeight;
|
||||
setShowExpandIcon(isOverflowing);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle save action
|
||||
const handleSave = () => {
|
||||
if (onSave) {
|
||||
onSave(content);
|
||||
setShowSaveButton(false);
|
||||
}
|
||||
};
|
||||
|
||||
const textColorClass = disabled ? "text-white/40" : "text-white/60";
|
||||
const codeClass = code ? "font-mono text-xs" : "text-sm";
|
||||
|
||||
return (
|
||||
<textarea
|
||||
name={name}
|
||||
rows={rows}
|
||||
defaultValue={defaultValue}
|
||||
className={`resize-none bg-zinc-900 placeholder:text-white/20 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2 ${className}`}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
wrap={wrap}
|
||||
autoComplete={autoComplete}
|
||||
onChange={onChange || handleChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className={`relative ${isExpanded ? "w-full" : ""}`}>
|
||||
<textarea
|
||||
ref={textAreaRef}
|
||||
name={name}
|
||||
rows={rows}
|
||||
defaultValue={defaultValue}
|
||||
className={`resize-none bg-zinc-900 placeholder:text-white/20 ${codeClass} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2 ${textColorClass} ${className}`}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
wrap={wrap}
|
||||
autoComplete={autoComplete}
|
||||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{showSaveButton && (
|
||||
<div className="flex flex-row justify-end px-8 sticky bottom-4 right-6">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="flex items-center mt-4 gap-x-2 cursor-pointer px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-[#222628]/60 transition-all duration-150 ease-in-out "
|
||||
disabled={disabled}
|
||||
>
|
||||
<Check size={18} weight="bold" color="#D3D4D4" />
|
||||
<div className="text-[#D3D4D4] text-xs font-bold leading-[18px]">
|
||||
Save Update
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showExpandIcon && !showSaveButton && (
|
||||
<button
|
||||
onClick={toggleExpansion}
|
||||
className={`absolute bottom-2 right-2 text-lg ${
|
||||
isExpanded ? "text-2xl" : "text-xl"
|
||||
} text-white/60 hover:text-white transition-all duration-150 ease-in-out`}
|
||||
aria-label={isExpanded ? "Contract" : "Expand"}
|
||||
disabled={disabled}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ArrowsIn className="hover:scale-90" />
|
||||
) : (
|
||||
<ArrowsOut className="hover:scale-110 active:scale-125 transition-all duration-150 ease-in-out" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ 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";
|
||||
import Badge from "@/components/Generic/Badges/Badge";
|
||||
|
||||
export default function FeatureSettings({
|
||||
workspace,
|
||||
@ -11,89 +12,150 @@ export default function FeatureSettings({
|
||||
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) => {
|
||||
<div className="flex flex-col gap-6 mt-4 pt-8 border-t-2 border-white/10">
|
||||
<div>
|
||||
<EnableSystemPrompt
|
||||
workspace={workspace}
|
||||
settings={settings}
|
||||
onUpdateSettings={onUpdateSettings}
|
||||
/>
|
||||
{settings.config.systemPrompt.isEnabled && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<TextAreaBlock
|
||||
workspace={workspace}
|
||||
label="System Prompt"
|
||||
description="Specify the context and instructions for the AI in this workspace. A well-defined prompt ensures the AI delivers relevant and precise responses."
|
||||
name="systemPrompt"
|
||||
defaultValue={settings.config.systemPrompt.content}
|
||||
onSave={(newContent) =>
|
||||
onUpdateSettings({
|
||||
...settings,
|
||||
config: {
|
||||
...settings.config,
|
||||
systemPrompt: {
|
||||
...settings.config.systemPrompt,
|
||||
content: newContent,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
code
|
||||
initialRows={6}
|
||||
/>
|
||||
<CheckBoxBlock
|
||||
workspace={workspace}
|
||||
label="override workspace prompt"
|
||||
inline
|
||||
name="overrideSystemPrompt"
|
||||
initialChecked={settings.config.systemPrompt.override}
|
||||
onToggle={(override) =>
|
||||
onUpdateSettings({
|
||||
...settings,
|
||||
config: {
|
||||
...settings.config,
|
||||
systemPrompt: {
|
||||
...settings.config.systemPrompt,
|
||||
override,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<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."
|
||||
/>
|
||||
<div className=" flex gap-1 -mb-1 mt-4">
|
||||
{settings.config.promptSchema.schemas.map((schema, index) => (
|
||||
<Badge
|
||||
key={`schema_${index}`}
|
||||
size="md"
|
||||
rounded="md"
|
||||
label={`${schema.title}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<TextArea
|
||||
name="openAiPrompt"
|
||||
defaultValue={settings.config.promptSchema.content}
|
||||
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."
|
||||
onSave={(e) =>
|
||||
onUpdateSettings({
|
||||
...settings,
|
||||
config: {
|
||||
...settings.config,
|
||||
components: {
|
||||
...settings.config.components,
|
||||
[component]: {
|
||||
...settings.config.components[component],
|
||||
isEnabled: enabled,
|
||||
},
|
||||
promptSchema: {
|
||||
...settings.config.promptSchema,
|
||||
content: e,
|
||||
},
|
||||
},
|
||||
});
|
||||
showToast(
|
||||
`${componentLabel} has been ${enabled ? "enabled" : "disabled"}`,
|
||||
"success",
|
||||
{ clear: true }
|
||||
})
|
||||
}
|
||||
code
|
||||
initialRows={6}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<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"
|
||||
divider
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -75,8 +75,8 @@ export default function MetaResponseSettings({ workspace }) {
|
||||
<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"
|
||||
description="This feature lets you dictate app behavior 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-semi-bold text-white"
|
||||
Icon={Cube}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -602,11 +602,15 @@ const metaResponseDefaultSettings = {
|
||||
canEdit: ["admin", "manager"],
|
||||
},
|
||||
promptSchema: {
|
||||
content: "",
|
||||
suggestionsList: [
|
||||
content: "## Prompt Guidelines\n- you are a helpful assistant, you will be provided a question to create a list of four elements\n- when requested to return structured data return them in a JSON object code block , don't introduce them or label them, just return them at the end of your response.\n- When presenting choices or detailed information, encapsulate the data in JSON format, aiming for a user-friendly interaction through:\n\t- type options: you will use this if options are a better way to seak users interaction, include displayTypess: buttons, list,checkbox, or dropdown based on the context.\n\t- type range: you will use this if the user is required to input a numeric between a certain range.\n\t- type rating: you will use this if the user should insert a rating, uswaly between one and five.\n\t- type date: you will use this if the user should insert a date.\n- if asked to return options return them as structured data, only when asked.\n- always return response as normal in markdown first then associate the data structure object below.\n- make your response rich in markdown.\n- if you find that your response at any time contain options follow the instructions above.\n---\n### Response Example\n#### Discover More\n**Fascinating Topic**\nExplore intriguing facts and details about your chosen subject, enhancing your understanding and curiosity.\n\n```json\n{\n \"inputs\": {\n \"type\": \"options\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"Restart Router\",\n \"value\": \"restart router\"\n },\n {\n \"label\": \"Check Service Status\",\n \"value\": \"check service status\"\n },\n ... \n ],\n \"label\":\"Select Server \",\n \"description\":\"list of servers as described\"\n \n },\n \"settings\": {\n \"allowMultiple\": false,\n \"displayType\": \"chose one, buttons/list/dropdown\"\n }\n },\n \"sentiment\": \"happy\",\n \"style\": \"text\"\n}\n```\n\ninput types:\n```json\n{\n \"type\":\"options\",\n \"data\":{\n \"options\":[\n {\n \"label\":\"Restart Router\",\n \"value\":\"restart_router\"\n },\n {\n \"label\":\"Check Service Status\",\n \"value\":\"check_service_status\"\n },\n {\n \"label\":\"Contact Support\",\n \"value\":\"contact_support\"\n }\n ]\n },\n \"settings\":{\n \"allowMultiple\":false,\n \"displayType\":\"buttons\"\n }\n}\n```\n\n```json\n{\n \"type\":\"range\",\n \"data\":{\n \"min\":1,\n \"max\":10,\n \"step\":1\n },\n \"settings\":{\n \"showValue\":true\n }\n}\n```\n\n```json\n{\n \"type\":\"rating\",\n \"data\":{\n \"max\":5,\n \"defaultValue\":3,\n \"icon\":\"star\"\n }\n}\n```\n\n```json\n{\n \"type\":\"date\",\n \"settings\":{\n \"format\":\"YYYY-MM-DD\",\n \"minDate\":\"2021-01-01\",\n \"maxDate\":\"2023-12-31\"\n }\n}\n```",
|
||||
schemas: [
|
||||
{
|
||||
title: "",
|
||||
content: "",
|
||||
title: "All Input Types",
|
||||
content: "## Prompt Guidelines\n- you are a helpful assistant, you will be provided a question to create a list of four elements\n- when requested to return structured data return them in a JSON object code block , don't introduce them or label them, just return them at the end of your response.\n- When presenting choices or detailed information, encapsulate the data in JSON format, aiming for a user-friendly interaction through:\n\t- type options: you will use this if options are a better way to seak users interaction, include displayTypess: buttons, list,checkbox, or dropdown based on the context.\n\t- type range: you will use this if the user is required to input a numeric between a certain range.\n\t- type rating: you will use this if the user should insert a rating, uswaly between one and five.\n\t- type date: you will use this if the user should insert a date.\n- if asked to return options return them as structured data, only when asked.\n- always return response as normal in markdown first then associate the data structure object below.\n- make your response rich in markdown.\n- if you find that your response at any time contain options follow the instructions above.\n---\n### Response Example\n#### Discover More\n**Fascinating Topic**\nExplore intriguing facts and details about your chosen subject, enhancing your understanding and curiosity.\n\n```json\n{\n \"inputs\": {\n \"type\": \"options\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"Restart Router\",\n \"value\": \"restart router\"\n },\n {\n \"label\": \"Check Service Status\",\n \"value\": \"check service status\"\n },\n ... \n ],\n \"label\":\"Select Server \",\n \"description\":\"list of servers as described\"\n \n },\n \"settings\": {\n \"allowMultiple\": false,\n \"displayType\": \"chose one, buttons/list/dropdown\"\n }\n },\n \"sentiment\": \"happy\",\n \"style\": \"text\"\n}\n```\n\ninput types:\n```json\n{\n \"type\":\"options\",\n \"data\":{\n \"options\":[\n {\n \"label\":\"Restart Router\",\n \"value\":\"restart_router\"\n },\n {\n \"label\":\"Check Service Status\",\n \"value\":\"check_service_status\"\n },\n {\n \"label\":\"Contact Support\",\n \"value\":\"contact_support\"\n }\n ]\n },\n \"settings\":{\n \"allowMultiple\":false,\n \"displayType\":\"buttons\"\n }\n}\n```\n\n```json\n{\n \"type\":\"range\",\n \"data\":{\n \"min\":1,\n \"max\":10,\n \"step\":1\n },\n \"settings\":{\n \"showValue\":true\n }\n}\n```\n\n```json\n{\n \"type\":\"rating\",\n \"data\":{\n \"max\":5,\n \"defaultValue\":3,\n \"icon\":\"star\"\n }\n}\n```\n\n```json\n{\n \"type\":\"date\",\n \"settings\":{\n \"format\":\"YYYY-MM-DD\",\n \"minDate\":\"2021-01-01\",\n \"maxDate\":\"2023-12-31\"\n }\n}\n```",
|
||||
},
|
||||
{
|
||||
title: "Suggestions Buttons Type",
|
||||
content: "## Prompt Guidelines\n- you are a helpful assistant, you will be provided a question to create a list of four elements\n- when requested to return structured data return them in a JSON object code block , don't introduce them or label them, just return them at the end of your response.\n- When presenting choices or detailed information, encapsulate the data in JSON format, aiming for a user-friendly interaction through:\n\t- type options: you will use this if options are a better way to seak users interaction, include displayTypess: buttons, list,checkbox, or dropdown based on the context.\n\t- type range: you will use this if the user is required to input a numeric between a certain range.\n\t- type rating: you will use this if the user should insert a rating, uswaly between one and five.\n\t- type date: you will use this if the user should insert a date.\n- if asked to return options return them as structured data, only when asked.\n- always return response as normal in markdown first then associate the data structure object below.\n- make your response rich in markdown.\n- if you find that your response at any time contain options follow the instructions above.\n---\n### Response Example\n#### Discover More\n**Fascinating Topic**\nExplore intriguing facts and details about your chosen subject, enhancing your understanding and curiosity.\n\n```json\n{\n \"inputs\": {\n \"type\": \"options\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"Restart Router\",\n \"value\": \"restart router\"\n },\n {\n \"label\": \"Check Service Status\",\n \"value\": \"check service status\"\n },\n ... \n ],\n \"label\":\"Select Server \",\n \"description\":\"list of servers as described\"\n \n },\n \"settings\": {\n \"allowMultiple\": false,\n \"displayType\": \"chose one, buttons/list/dropdown\"\n }\n },\n \"sentiment\": \"happy\",\n \"style\": \"text\"\n}\n```",
|
||||
},
|
||||
],
|
||||
overrideWorkspacePrompt: false,
|
||||
@ -662,7 +666,7 @@ const metaResponseDefaultSettings = {
|
||||
},
|
||||
promptSchema: {
|
||||
content: "",
|
||||
suggestionsList: [
|
||||
schemas: [
|
||||
{
|
||||
title: "",
|
||||
content: "",
|
||||
@ -713,7 +717,7 @@ const metaResponseDefaultSettings = {
|
||||
},
|
||||
promptSchema: {
|
||||
content: "",
|
||||
suggestionsList: [
|
||||
schemas: [
|
||||
{
|
||||
title: "",
|
||||
content: "",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user