mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-11 16:22:40 +02:00
Reduce size of instructions and examples font in agents
This commit is contained in:
akhisud3195
parent
dc555a21c0
commit
703df486f9
2 changed files with 389 additions and 349 deletions
|
|
@ -235,16 +235,16 @@ export function EditableField({
|
||||||
>
|
>
|
||||||
{value ? (
|
{value ? (
|
||||||
<>
|
<>
|
||||||
{markdown && <div className="max-h-[420px] overflow-y-auto">
|
{markdown && <div>
|
||||||
<MarkdownContent content={value} atValues={mentionsAtValues} />
|
<MarkdownContent content={value} atValues={mentionsAtValues} />
|
||||||
</div>}
|
</div>}
|
||||||
{!markdown && <div className={`${multiline ? 'whitespace-pre-wrap max-h-[420px] overflow-y-auto' : 'flex items-center'}`}>
|
{!markdown && <div className={multiline ? 'whitespace-pre-wrap' : 'flex items-center'}>
|
||||||
<MarkdownContent content={value} atValues={mentionsAtValues} />
|
<MarkdownContent content={value} atValues={mentionsAtValues} />
|
||||||
</div>}
|
</div>}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{markdown && <div className="max-h-[420px] overflow-y-auto text-gray-400">
|
{markdown && <div className="text-gray-400">
|
||||||
<MarkdownContent content={placeholder} atValues={mentionsAtValues} />
|
<MarkdownContent content={placeholder} atValues={mentionsAtValues} />
|
||||||
</div>}
|
</div>}
|
||||||
{!markdown && <span className="text-gray-400">{placeholder}</span>}
|
{!markdown && <span className="text-gray-400">{placeholder}</span>}
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,9 @@ const sectionHeaderStyles = "text-xs font-medium uppercase tracking-wider text-g
|
||||||
// Common textarea styles
|
// Common textarea styles
|
||||||
const textareaStyles = "rounded-lg p-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 placeholder:text-gray-400 dark:placeholder:text-gray-500";
|
const textareaStyles = "rounded-lg p-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 placeholder:text-gray-400 dark:placeholder:text-gray-500";
|
||||||
|
|
||||||
|
// Add this type definition after the imports
|
||||||
|
type TabType = 'configurations' | 'instructions' | 'examples';
|
||||||
|
|
||||||
export function AgentConfig({
|
export function AgentConfig({
|
||||||
projectId,
|
projectId,
|
||||||
workflow,
|
workflow,
|
||||||
|
|
@ -59,6 +62,7 @@ export function AgentConfig({
|
||||||
const { showPreview } = usePreviewModal();
|
const { showPreview } = usePreviewModal();
|
||||||
const [localName, setLocalName] = useState(agent.name);
|
const [localName, setLocalName] = useState(agent.name);
|
||||||
const [nameError, setNameError] = useState<string | null>(null);
|
const [nameError, setNameError] = useState<string | null>(null);
|
||||||
|
const [activeTab, setActiveTab] = useState<TabType>('configurations');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLocalName(agent.name);
|
setLocalName(agent.name);
|
||||||
|
|
@ -126,369 +130,405 @@ export function AgentConfig({
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-6 p-4">
|
<div className="flex flex-col gap-6 p-4 h-[calc(100vh-100px)] min-h-0 flex-1">
|
||||||
{!agent.locked && (
|
{/* Tabs */}
|
||||||
<div className="space-y-4">
|
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||||
<div className="space-y-2">
|
{(['configurations', 'instructions', 'examples'] as TabType[]).map((tab) => (
|
||||||
<label className={sectionHeaderStyles}>
|
<button
|
||||||
Name
|
key={tab}
|
||||||
</label>
|
onClick={() => setActiveTab(tab)}
|
||||||
<div className={clsx(
|
className={clsx(
|
||||||
"border rounded-lg focus-within:ring-2",
|
"px-4 py-2 text-sm font-medium transition-colors relative",
|
||||||
nameError
|
activeTab === tab
|
||||||
? "border-red-500 focus-within:ring-red-500/20"
|
? "text-indigo-600 dark:text-indigo-400 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-indigo-500 dark:after:bg-indigo-400"
|
||||||
: "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
|
: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
||||||
)}>
|
|
||||||
<Textarea
|
|
||||||
value={agent.name}
|
|
||||||
useValidation={true}
|
|
||||||
updateOnBlur={true}
|
|
||||||
validate={(value) => {
|
|
||||||
const error = validateAgentName(value, agent.name, usedAgentNames);
|
|
||||||
setNameError(error);
|
|
||||||
return { valid: !error, errorMessage: error || undefined };
|
|
||||||
}}
|
|
||||||
onValidatedChange={(value) => {
|
|
||||||
handleUpdate({
|
|
||||||
...agent,
|
|
||||||
name: value
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
placeholder="Enter agent name..."
|
|
||||||
className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
|
|
||||||
autoResize
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{nameError && (
|
|
||||||
<p className="text-sm text-red-500">{nameError}</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className={sectionHeaderStyles}>
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<Textarea
|
|
||||||
value={agent.description || ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
handleUpdate({
|
|
||||||
...agent,
|
|
||||||
description: e.target.value
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
placeholder="Enter a description for this agent"
|
|
||||||
className={textareaStyles}
|
|
||||||
autoResize
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<label className={sectionHeaderStyles}>
|
|
||||||
Agent Type
|
|
||||||
</label>
|
|
||||||
<div className="relative ml-2 group">
|
|
||||||
<Info
|
|
||||||
className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
|
|
||||||
/>
|
|
||||||
<div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
|
|
||||||
<div className="mb-1 font-medium">Agent Types</div>
|
|
||||||
Conversation agents' responses are user-facing. You can use conversation agents for multi-turn conversations with users.
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
Task agents' responses are internal and available to other agents. You can use them to build pipelines and DAGs within workflows. E.g. Conversation Agent {'->'} Task Agent {'->'} Task Agent.
|
|
||||||
<div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CustomDropdown
|
|
||||||
value={agent.outputVisibility}
|
|
||||||
options={[
|
|
||||||
{ key: "user_facing", label: "Conversation Agent" },
|
|
||||||
{ key: "internal", label: "Task Agent" }
|
|
||||||
]}
|
|
||||||
onChange={(value) => handleUpdate({
|
|
||||||
...agent,
|
|
||||||
outputVisibility: value as z.infer<typeof WorkflowAgent>['outputVisibility']
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className={sectionHeaderStyles}>
|
|
||||||
Instructions
|
|
||||||
</label>
|
|
||||||
<CustomButton
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowGenerateModal(true)}
|
|
||||||
startContent={<Sparkles className="w-4 h-4" />}
|
|
||||||
>
|
>
|
||||||
Generate
|
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||||
</CustomButton>
|
</button>
|
||||||
</div>
|
))}
|
||||||
<EditableField
|
|
||||||
key="instructions"
|
|
||||||
value={agent.instructions}
|
|
||||||
onChange={(value) => {
|
|
||||||
handleUpdate({
|
|
||||||
...agent,
|
|
||||||
instructions: value
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
markdown
|
|
||||||
multiline
|
|
||||||
mentions
|
|
||||||
mentionsAtValues={atMentions}
|
|
||||||
showSaveButton={true}
|
|
||||||
showDiscardButton={true}
|
|
||||||
className="border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4">
|
{/* Tab Content */}
|
||||||
<label className={sectionHeaderStyles}>
|
<div className="mt-4 flex-1 flex flex-col min-h-0 h-0">
|
||||||
Examples
|
{activeTab === 'configurations' && (
|
||||||
</label>
|
<div className="space-y-6">
|
||||||
<EditableField
|
{!agent.locked && (
|
||||||
key="examples"
|
<div className="space-y-4">
|
||||||
value={agent.examples || ""}
|
<div className="space-y-2">
|
||||||
onChange={(value) => {
|
<label className={sectionHeaderStyles}>
|
||||||
handleUpdate({
|
Name
|
||||||
...agent,
|
</label>
|
||||||
examples: value
|
<div className={clsx(
|
||||||
});
|
"border rounded-lg focus-within:ring-2",
|
||||||
}}
|
nameError
|
||||||
placeholder="Enter examples for this agent"
|
? "border-red-500 focus-within:ring-red-500/20"
|
||||||
markdown
|
: "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
|
||||||
multiline
|
)}>
|
||||||
mentions
|
<Textarea
|
||||||
mentionsAtValues={atMentions}
|
value={agent.name}
|
||||||
showSaveButton={true}
|
useValidation={true}
|
||||||
showDiscardButton={true}
|
updateOnBlur={true}
|
||||||
className="border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
|
validate={(value) => {
|
||||||
/>
|
const error = validateAgentName(value, agent.name, usedAgentNames);
|
||||||
</div>
|
setNameError(error);
|
||||||
|
return { valid: !error, errorMessage: error || undefined };
|
||||||
{useRag && (
|
}}
|
||||||
<div className="space-y-4">
|
onValidatedChange={(value) => {
|
||||||
<label className={sectionHeaderStyles}>
|
|
||||||
RAG
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<div>
|
|
||||||
<Select
|
|
||||||
variant="bordered"
|
|
||||||
placeholder="Add data source"
|
|
||||||
size="sm"
|
|
||||||
className="w-64"
|
|
||||||
onSelectionChange={(keys) => {
|
|
||||||
const key = keys.currentKey as string;
|
|
||||||
if (key) {
|
|
||||||
handleUpdate({
|
|
||||||
...agent,
|
|
||||||
ragDataSources: [...(agent.ragDataSources || []), key]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
startContent={<PlusIcon className="w-4 h-4 text-gray-500" />}
|
|
||||||
>
|
|
||||||
{dataSources
|
|
||||||
.filter((ds) => !(agent.ragDataSources || []).includes(ds._id))
|
|
||||||
.map((ds) => (
|
|
||||||
<SelectItem key={ds._id}>
|
|
||||||
{ds.name}
|
|
||||||
</SelectItem>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
{(agent.ragDataSources || []).map((source) => {
|
|
||||||
const ds = dataSources.find((ds) => ds._id === source);
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={source}
|
|
||||||
className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="flex items-center justify-center w-8 h-8 rounded-md bg-indigo-50 dark:bg-indigo-900/20">
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4 text-indigo-600 dark:text-indigo-400"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
||||||
{ds?.name || "Unknown"}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
Data Source
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CustomButton
|
|
||||||
variant="tertiary"
|
|
||||||
size="sm"
|
|
||||||
className="text-gray-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
|
|
||||||
onClick={() => {
|
|
||||||
const newSources = agent.ragDataSources?.filter((s) => s !== source);
|
|
||||||
handleUpdate({
|
handleUpdate({
|
||||||
...agent,
|
...agent,
|
||||||
ragDataSources: newSources
|
name: value
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
startContent={<Trash2 className="w-4 h-4" />}
|
placeholder="Enter agent name..."
|
||||||
>
|
className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
|
||||||
Remove
|
autoResize
|
||||||
</CustomButton>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
{nameError && (
|
||||||
})}
|
<p className="text-sm text-red-500">{nameError}</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
{agent.ragDataSources !== undefined && agent.ragDataSources.length > 0 && (
|
|
||||||
<>
|
|
||||||
<div className="mt-4">
|
|
||||||
<button
|
|
||||||
onClick={() => setIsAdvancedConfigOpen(!isAdvancedConfigOpen)}
|
|
||||||
className="flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
|
|
||||||
>
|
|
||||||
{isAdvancedConfigOpen ?
|
|
||||||
<ChevronDown className="w-4 h-4 text-gray-400" /> :
|
|
||||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
|
||||||
}
|
|
||||||
Advanced RAG configuration
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{isAdvancedConfigOpen && (
|
|
||||||
<div className="mt-3 ml-4 p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
|
||||||
<div className="grid gap-6">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className={sectionHeaderStyles}>
|
|
||||||
Return type
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-4">
|
|
||||||
{["chunks", "content"].map((type) => (
|
|
||||||
<button
|
|
||||||
key={type}
|
|
||||||
onClick={() => handleUpdate({
|
|
||||||
...agent,
|
|
||||||
ragReturnType: type as z.infer<typeof WorkflowAgent>['ragReturnType']
|
|
||||||
})}
|
|
||||||
className={clsx(
|
|
||||||
"px-4 py-2 rounded-lg text-sm font-medium transition-colors",
|
|
||||||
agent.ragReturnType === type
|
|
||||||
? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 border-2 border-indigo-200 dark:border-indigo-800"
|
|
||||||
: "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{type.charAt(0).toUpperCase() + type.slice(1)}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className={sectionHeaderStyles}>
|
|
||||||
Number of matches
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
max="20"
|
|
||||||
className="w-24 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 focus:border-indigo-500 dark:focus:border-indigo-400"
|
|
||||||
value={agent.ragK}
|
|
||||||
onChange={(e) => handleUpdate({
|
|
||||||
...agent,
|
|
||||||
ragK: parseInt(e.target.value)
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
matches
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
Number of relevant chunks to retrieve (1-20)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
Description
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
value={agent.description || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
handleUpdate({
|
||||||
|
...agent,
|
||||||
|
description: e.target.value
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
placeholder="Enter a description for this agent"
|
||||||
|
className={textareaStyles}
|
||||||
|
autoResize
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
Agent Type
|
||||||
|
</label>
|
||||||
|
<div className="relative ml-2 group">
|
||||||
|
<Info
|
||||||
|
className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
|
||||||
|
<div className="mb-1 font-medium">Agent Types</div>
|
||||||
|
Conversation agents' responses are user-facing. You can use conversation agents for multi-turn conversations with users.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Task agents' responses are internal and available to other agents. You can use them to build pipelines and DAGs within workflows. E.g. Conversation Agent {'->'} Task Agent {'->'} Task Agent.
|
||||||
|
<div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CustomDropdown
|
||||||
|
value={agent.outputVisibility}
|
||||||
|
options={[
|
||||||
|
{ key: "user_facing", label: "Conversation Agent" },
|
||||||
|
{ key: "internal", label: "Task Agent" }
|
||||||
|
]}
|
||||||
|
onChange={(value) => handleUpdate({
|
||||||
|
...agent,
|
||||||
|
outputVisibility: value as z.infer<typeof WorkflowAgent>['outputVisibility']
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{useRag && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
RAG
|
||||||
|
</label>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div>
|
||||||
|
<Select
|
||||||
|
variant="bordered"
|
||||||
|
placeholder="Add data source"
|
||||||
|
size="sm"
|
||||||
|
className="w-64"
|
||||||
|
onSelectionChange={(keys) => {
|
||||||
|
const key = keys.currentKey as string;
|
||||||
|
if (key) {
|
||||||
|
handleUpdate({
|
||||||
|
...agent,
|
||||||
|
ragDataSources: [...(agent.ragDataSources || []), key]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
startContent={<PlusIcon className="w-4 h-4 text-gray-500" />}
|
||||||
|
>
|
||||||
|
{dataSources
|
||||||
|
.filter((ds) => !(agent.ragDataSources || []).includes(ds._id))
|
||||||
|
.map((ds) => (
|
||||||
|
<SelectItem key={ds._id}>
|
||||||
|
{ds.name}
|
||||||
|
</SelectItem>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{(agent.ragDataSources || []).map((source) => {
|
||||||
|
const ds = dataSources.find((ds) => ds._id === source);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={source}
|
||||||
|
className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex items-center justify-center w-8 h-8 rounded-md bg-indigo-50 dark:bg-indigo-900/20">
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 text-indigo-600 dark:text-indigo-400"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{ds?.name || "Unknown"}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Data Source
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CustomButton
|
||||||
|
variant="tertiary"
|
||||||
|
size="sm"
|
||||||
|
className="text-gray-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||||
|
onClick={() => {
|
||||||
|
const newSources = agent.ragDataSources?.filter((s) => s !== source);
|
||||||
|
handleUpdate({
|
||||||
|
...agent,
|
||||||
|
ragDataSources: newSources
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
startContent={<Trash2 className="w-4 h-4" />}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</CustomButton>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{agent.ragDataSources !== undefined && agent.ragDataSources.length > 0 && (
|
||||||
|
<>
|
||||||
|
<div className="mt-4">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsAdvancedConfigOpen(!isAdvancedConfigOpen)}
|
||||||
|
className="flex items-center gap-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
|
||||||
|
>
|
||||||
|
{isAdvancedConfigOpen ?
|
||||||
|
<ChevronDown className="w-4 h-4 text-gray-400" /> :
|
||||||
|
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||||
|
}
|
||||||
|
Advanced RAG configuration
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isAdvancedConfigOpen && (
|
||||||
|
<div className="mt-3 ml-4 p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||||
|
<div className="grid gap-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
Return type
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{["chunks", "content"].map((type) => (
|
||||||
|
<button
|
||||||
|
key={type}
|
||||||
|
onClick={() => handleUpdate({
|
||||||
|
...agent,
|
||||||
|
ragReturnType: type as z.infer<typeof WorkflowAgent>['ragReturnType']
|
||||||
|
})}
|
||||||
|
className={clsx(
|
||||||
|
"px-4 py-2 rounded-lg text-sm font-medium transition-colors",
|
||||||
|
agent.ragReturnType === type
|
||||||
|
? "bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 border-2 border-indigo-200 dark:border-indigo-800"
|
||||||
|
: "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{type.charAt(0).toUpperCase() + type.slice(1)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
Number of matches
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="20"
|
||||||
|
className="w-24 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 focus:border-indigo-500 dark:focus:border-indigo-400"
|
||||||
|
value={agent.ragK}
|
||||||
|
onChange={(e) => handleUpdate({
|
||||||
|
...agent,
|
||||||
|
ragK: parseInt(e.target.value)
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
matches
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Number of relevant chunks to retrieve (1-20)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
Model
|
||||||
|
</label>
|
||||||
|
<div className="relative ml-2 group">
|
||||||
|
<Info
|
||||||
|
className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
|
||||||
|
<div className="mb-1 font-medium">Model Configuration</div>
|
||||||
|
Set this according to the PROVIDER_BASE_URL you have set in your .env file (such as your LiteLLM, gateway).
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
E.g. LiteLLM's naming convention is like: 'claude-3-7-sonnet-latest', but you may have set alias model names or might be using a different provider like openrouter, openai etc.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
By default, the model is set to gpt-4.1, assuming your OpenAI API key is set in PROVIDER_API_KEY and PROVIDER_BASE_URL is not set.
|
||||||
|
<div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
value={agent.model}
|
||||||
|
onChange={(e) => handleUpdate({
|
||||||
|
...agent,
|
||||||
|
model: e.target.value as z.infer<typeof WorkflowAgent>['model']
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{USE_TRANSFER_CONTROL_OPTIONS && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
Conversation control after turn
|
||||||
|
</label>
|
||||||
|
<CustomDropdown
|
||||||
|
value={agent.controlType}
|
||||||
|
options={[
|
||||||
|
{ key: "retain", label: "Retain control" },
|
||||||
|
{ key: "relinquish_to_parent", label: "Relinquish to parent" },
|
||||||
|
{ key: "relinquish_to_start", label: "Relinquish to 'start' agent" }
|
||||||
|
]}
|
||||||
|
onChange={(value) => handleUpdate({
|
||||||
|
...agent,
|
||||||
|
controlType: value as z.infer<typeof WorkflowAgent>['controlType']
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
{activeTab === 'instructions' && (
|
||||||
<div className="flex items-center">
|
<div className="flex flex-col flex-1 min-h-0 h-0">
|
||||||
<label className={sectionHeaderStyles}>
|
<div className="flex items-center justify-between mb-4">
|
||||||
Model
|
<label className={sectionHeaderStyles}>
|
||||||
</label>
|
Instructions
|
||||||
<div className="relative ml-2 group">
|
</label>
|
||||||
<Info
|
<CustomButton
|
||||||
className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
|
variant="primary"
|
||||||
/>
|
size="sm"
|
||||||
<div className="absolute bottom-full left-0 mb-2 p-3 w-80 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs invisible group-hover:visible z-50">
|
onClick={() => setShowGenerateModal(true)}
|
||||||
<div className="mb-1 font-medium">Model Configuration</div>
|
startContent={<Sparkles className="w-4 h-4" />}
|
||||||
Set this according to the PROVIDER_BASE_URL you have set in your .env file (such as your LiteLLM, gateway).
|
>
|
||||||
<br />
|
Generate
|
||||||
<br />
|
</CustomButton>
|
||||||
E.g. LiteLLM's naming convention is like: 'claude-3-7-sonnet-latest', but you may have set alias model names or might be using a different provider like openrouter, openai etc.
|
</div>
|
||||||
<br />
|
<div className="flex-1 min-h-0 h-0">
|
||||||
<br />
|
<div className="text-sm h-full">
|
||||||
By default, the model is set to gpt-4.1, assuming your OpenAI API key is set in PROVIDER_API_KEY and PROVIDER_BASE_URL is not set.
|
<EditableField
|
||||||
<div className="absolute h-2 w-2 bg-white dark:bg-gray-800 transform rotate-45 -bottom-1 left-4 border-r border-b border-gray-200 dark:border-gray-700"></div>
|
key="instructions"
|
||||||
|
value={agent.instructions}
|
||||||
|
onChange={(value) => {
|
||||||
|
handleUpdate({
|
||||||
|
...agent,
|
||||||
|
instructions: value
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
markdown
|
||||||
|
multiline
|
||||||
|
mentions
|
||||||
|
mentionsAtValues={atMentions}
|
||||||
|
showSaveButton={true}
|
||||||
|
showDiscardButton={true}
|
||||||
|
className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
<Input
|
|
||||||
value={agent.model}
|
|
||||||
onChange={(e) => handleUpdate({
|
|
||||||
...agent,
|
|
||||||
model: e.target.value as z.infer<typeof WorkflowAgent>['model']
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{USE_TRANSFER_CONTROL_OPTIONS && (
|
{activeTab === 'examples' && (
|
||||||
<div className="space-y-4">
|
<div className="flex flex-col flex-1 min-h-0 h-0">
|
||||||
<label className={sectionHeaderStyles}>
|
<label className={clsx(sectionHeaderStyles, "mb-4")}>
|
||||||
Conversation control after turn
|
Examples
|
||||||
</label>
|
</label>
|
||||||
<CustomDropdown
|
<div className="flex-1 min-h-0 h-0">
|
||||||
value={agent.controlType}
|
<div className="text-sm h-full">
|
||||||
options={[
|
<EditableField
|
||||||
{ key: "retain", label: "Retain control" },
|
key="examples"
|
||||||
{ key: "relinquish_to_parent", label: "Relinquish to parent" },
|
value={agent.examples || ""}
|
||||||
{ key: "relinquish_to_start", label: "Relinquish to 'start' agent" }
|
onChange={(value) => {
|
||||||
]}
|
handleUpdate({
|
||||||
onChange={(value) => handleUpdate({
|
...agent,
|
||||||
...agent,
|
examples: value
|
||||||
controlType: value as z.infer<typeof WorkflowAgent>['controlType']
|
});
|
||||||
})}
|
}}
|
||||||
/>
|
placeholder="Enter examples for this agent"
|
||||||
</div>
|
markdown
|
||||||
)}
|
multiline
|
||||||
|
mentions
|
||||||
|
mentionsAtValues={atMentions}
|
||||||
|
showSaveButton={true}
|
||||||
|
showDiscardButton={true}
|
||||||
|
className="h-full min-h-0 border border-gray-200 dark:border-gray-700 rounded-lg focus-within:ring-2 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20 overflow-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<PreviewModalProvider>
|
<PreviewModalProvider>
|
||||||
<GenerateInstructionsModal
|
<GenerateInstructionsModal
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue