mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-03 12:22:38 +02:00
Reorganize agent sections
This commit is contained in:
akhisud3195
parent
c867015366
commit
b52e4b952b
1 changed files with 286 additions and 297 deletions
|
|
@ -31,7 +31,7 @@ const sectionHeaderStyles = "block text-xs font-medium uppercase tracking-wider
|
|||
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 = 'instructions' | 'examples' | 'configurations' | 'rag';
|
||||
type TabType = 'instructions' | 'configurations';
|
||||
|
||||
export function AgentConfig({
|
||||
projectId,
|
||||
|
|
@ -195,7 +195,7 @@ export function AgentConfig({
|
|||
<div className="flex flex-col gap-6 p-4 h-[calc(100vh-100px)] min-h-0 flex-1">
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||
{(['instructions', 'examples', 'configurations', 'rag'] as TabType[]).map((tab) => (
|
||||
{(['instructions', 'configurations'] as TabType[]).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
|
|
@ -206,7 +206,7 @@ export function AgentConfig({
|
|||
: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
)}
|
||||
>
|
||||
{tab === 'rag' ? 'RAG' : tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -215,60 +215,23 @@ export function AgentConfig({
|
|||
<div className="mt-4 flex-1 flex flex-col min-h-0 h-0">
|
||||
{activeTab === 'instructions' && (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Instructions
|
||||
</label>
|
||||
<CustomButton
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setIsInstructionsMaximized(!isInstructionsMaximized)}
|
||||
showHoverContent={true}
|
||||
hoverContent={isInstructionsMaximized ? "Minimize" : "Maximize"}
|
||||
>
|
||||
{isInstructionsMaximized ? (
|
||||
<Minimize2 className="w-4 h-4" />
|
||||
) : (
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
)}
|
||||
</CustomButton>
|
||||
</div>
|
||||
<CustomButton
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => setShowGenerateModal(true)}
|
||||
startContent={<Sparkles className="w-4 h-4" />}
|
||||
>
|
||||
Generate
|
||||
</CustomButton>
|
||||
</div>
|
||||
{isInstructionsMaximized ? (
|
||||
<div className="fixed inset-0 z-50 bg-white dark:bg-gray-900">
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Instructions
|
||||
</label>
|
||||
<CustomButton
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setIsInstructionsMaximized(false)}
|
||||
showHoverContent={true}
|
||||
hoverContent="Minimize"
|
||||
>
|
||||
<Minimize2 className="w-4 h-4" />
|
||||
</CustomButton>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">{agent.name}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">/</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Instructions</span>
|
||||
</div>
|
||||
<CustomButton
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => setShowGenerateModal(true)}
|
||||
startContent={<Sparkles className="w-4 h-4" />}
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
style={{ lineHeight: 0 }}
|
||||
onClick={() => setIsInstructionsMaximized(false)}
|
||||
>
|
||||
Generate
|
||||
</CustomButton>
|
||||
<Minimize2 className="w-4 h-4" style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden p-4">
|
||||
<EditableField
|
||||
|
|
@ -292,71 +255,112 @@ export function AgentConfig({
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<EditableField
|
||||
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 overflow-auto"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'examples' && (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Examples
|
||||
</label>
|
||||
<CustomButton
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setIsExamplesMaximized(!isExamplesMaximized)}
|
||||
showHoverContent={true}
|
||||
hoverContent={isExamplesMaximized ? "Minimize" : "Maximize"}
|
||||
>
|
||||
{isExamplesMaximized ? (
|
||||
<Minimize2 className="w-4 h-4" />
|
||||
) : (
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
)}
|
||||
</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
{isExamplesMaximized ? (
|
||||
<div className="fixed inset-0 z-50 bg-white dark:bg-gray-900">
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="space-y-6">
|
||||
{/* Instructions Section */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Examples
|
||||
</label>
|
||||
<CustomButton
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setIsExamplesMaximized(false)}
|
||||
showHoverContent={true}
|
||||
hoverContent="Minimize"
|
||||
<label className={sectionHeaderStyles}>Instructions</label>
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
style={{ lineHeight: 0 }}
|
||||
onClick={() => setIsInstructionsMaximized(!isInstructionsMaximized)}
|
||||
>
|
||||
<Minimize2 className="w-4 h-4" />
|
||||
</CustomButton>
|
||||
{isInstructionsMaximized ? (
|
||||
<Minimize2 className="w-4 h-4" style={{ width: 16, height: 16 }} />
|
||||
) : (
|
||||
<Maximize2 className="w-4 h-4" style={{ width: 16, height: 16 }} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<CustomButton
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => setShowGenerateModal(true)}
|
||||
startContent={<Sparkles className="w-4 h-4" />}
|
||||
>
|
||||
Generate
|
||||
</CustomButton>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden p-4">
|
||||
<EditableField
|
||||
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 overflow-auto !mb-0 !mt-0"
|
||||
/>
|
||||
</div>
|
||||
{/* Examples Section */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className={sectionHeaderStyles}>Examples</label>
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
style={{ lineHeight: 0 }}
|
||||
onClick={() => setIsExamplesMaximized(!isExamplesMaximized)}
|
||||
>
|
||||
{isExamplesMaximized ? (
|
||||
<Minimize2 className="w-4 h-4" style={{ width: 16, height: 16 }} />
|
||||
) : (
|
||||
<Maximize2 className="w-4 h-4" style={{ width: 16, height: 16 }} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isExamplesMaximized ? (
|
||||
<div className="fixed inset-0 z-50 bg-white dark:bg-gray-900">
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">{agent.name}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">/</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Examples</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
style={{ lineHeight: 0 }}
|
||||
onClick={() => setIsExamplesMaximized(false)}
|
||||
>
|
||||
<Minimize2 className="w-4 h-4" style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden p-4">
|
||||
<EditableField
|
||||
key="examples-maximized"
|
||||
value={agent.examples || ""}
|
||||
onChange={(value) => {
|
||||
handleUpdate({
|
||||
...agent,
|
||||
examples: value
|
||||
});
|
||||
}}
|
||||
placeholder="Enter examples for this agent"
|
||||
markdown
|
||||
multiline
|
||||
mentions
|
||||
mentionsAtValues={atMentions}
|
||||
showSaveButton={true}
|
||||
showDiscardButton={true}
|
||||
className="h-full min-h-0 overflow-auto !mb-0 !mt-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<EditableField
|
||||
key="examples-maximized"
|
||||
key="examples"
|
||||
value={agent.examples || ""}
|
||||
onChange={(value) => {
|
||||
handleUpdate({
|
||||
|
|
@ -371,34 +375,17 @@ export function AgentConfig({
|
|||
mentionsAtValues={atMentions}
|
||||
showSaveButton={true}
|
||||
showDiscardButton={true}
|
||||
className="h-full min-h-0 overflow-auto"
|
||||
className="h-full min-h-0 overflow-auto !mb-0 !mt-0"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<EditableField
|
||||
key="examples"
|
||||
value={agent.examples || ""}
|
||||
onChange={(value) => {
|
||||
handleUpdate({
|
||||
...agent,
|
||||
examples: value
|
||||
});
|
||||
}}
|
||||
placeholder="Enter examples for this agent"
|
||||
markdown
|
||||
multiline
|
||||
mentions
|
||||
mentionsAtValues={atMentions}
|
||||
showSaveButton={true}
|
||||
showDiscardButton={true}
|
||||
className="h-full min-h-0 overflow-auto"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{activeTab === 'configurations' && (
|
||||
<div className="space-y-6">
|
||||
{!agent.locked && (
|
||||
|
|
@ -634,184 +621,186 @@ export function AgentConfig({
|
|||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'rag' && useRag && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="space-y-2">
|
||||
<label className={sectionHeaderStyles}>
|
||||
DATA SOURCES
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<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>
|
||||
|
||||
{showRagCta && (
|
||||
<CustomButton
|
||||
variant="primary"
|
||||
{useRag && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<label className={sectionHeaderStyles}>
|
||||
RAG DATA SOURCES
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Select
|
||||
variant="bordered"
|
||||
placeholder="Add data source"
|
||||
size="sm"
|
||||
onClick={handleUpdateInstructions}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
Update Instructions
|
||||
</CustomButton>
|
||||
)}
|
||||
</div>
|
||||
</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);
|
||||
className="w-64"
|
||||
onSelectionChange={(keys) => {
|
||||
const key = keys.currentKey as string;
|
||||
if (key) {
|
||||
handleUpdate({
|
||||
...agent,
|
||||
ragDataSources: newSources
|
||||
ragDataSources: [...(agent.ragDataSources || []), key]
|
||||
});
|
||||
}}
|
||||
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"
|
||||
}
|
||||
}}
|
||||
startContent={<PlusIcon className="w-4 h-4 text-gray-500" />}
|
||||
>
|
||||
{isAdvancedConfigOpen ?
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" /> :
|
||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||
{dataSources
|
||||
.filter((ds) => !(agent.ragDataSources || []).includes(ds._id))
|
||||
.map((ds) => (
|
||||
<SelectItem key={ds._id}>
|
||||
{ds.name}
|
||||
</SelectItem>
|
||||
))
|
||||
}
|
||||
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>
|
||||
</Select>
|
||||
|
||||
<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>
|
||||
{showRagCta && (
|
||||
<CustomButton
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleUpdateInstructions}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
Update Instructions
|
||||
</CustomButton>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<PreviewModalProvider>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue