mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-31 19:15:17 +02:00
Add maximize and minimize for agent instructions and examples
This commit is contained in:
akhisud3195
parent
67d3cc5e29
commit
f01b7f732e
1 changed files with 191 additions and 47 deletions
|
|
@ -4,7 +4,7 @@ import { AgenticAPITool } from "../../../lib/types/agents_api_types";
|
||||||
import { WorkflowPrompt, WorkflowAgent, Workflow } from "../../../lib/types/workflow_types";
|
import { WorkflowPrompt, WorkflowAgent, Workflow } from "../../../lib/types/workflow_types";
|
||||||
import { DataSource } from "../../../lib/types/datasource_types";
|
import { DataSource } from "../../../lib/types/datasource_types";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { PlusIcon, Sparkles, X as XIcon, ChevronDown, ChevronRight, Trash2 } from "lucide-react";
|
import { PlusIcon, Sparkles, X as XIcon, ChevronDown, ChevronRight, Trash2, Maximize2, Minimize2 } from "lucide-react";
|
||||||
import { useState, useEffect, useRef } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import { usePreviewModal } from "../workflow/preview-modal";
|
import { usePreviewModal } from "../workflow/preview-modal";
|
||||||
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Select, SelectItem } from "@heroui/react";
|
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Select, SelectItem } from "@heroui/react";
|
||||||
|
|
@ -59,6 +59,8 @@ export function AgentConfig({
|
||||||
}) {
|
}) {
|
||||||
const [isAdvancedConfigOpen, setIsAdvancedConfigOpen] = useState(false);
|
const [isAdvancedConfigOpen, setIsAdvancedConfigOpen] = useState(false);
|
||||||
const [showGenerateModal, setShowGenerateModal] = useState(false);
|
const [showGenerateModal, setShowGenerateModal] = useState(false);
|
||||||
|
const [isInstructionsMaximized, setIsInstructionsMaximized] = useState(false);
|
||||||
|
const [isExamplesMaximized, setIsExamplesMaximized] = useState(false);
|
||||||
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);
|
||||||
|
|
@ -75,6 +77,23 @@ export function AgentConfig({
|
||||||
}
|
}
|
||||||
}, [agent.controlType, agent, handleUpdate]);
|
}, [agent.controlType, agent, handleUpdate]);
|
||||||
|
|
||||||
|
// Add effect to handle escape key
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEscape = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
if (isInstructionsMaximized) {
|
||||||
|
setIsInstructionsMaximized(false);
|
||||||
|
}
|
||||||
|
if (isExamplesMaximized) {
|
||||||
|
setIsExamplesMaximized(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handleEscape);
|
||||||
|
return () => window.removeEventListener('keydown', handleEscape);
|
||||||
|
}, [isInstructionsMaximized, isExamplesMaximized]);
|
||||||
|
|
||||||
const validateName = (value: string) => {
|
const validateName = (value: string) => {
|
||||||
if (value.length === 0) {
|
if (value.length === 0) {
|
||||||
setNameError("Name cannot be empty");
|
setNameError("Name cannot be empty");
|
||||||
|
|
@ -463,9 +482,24 @@ export function AgentConfig({
|
||||||
{activeTab === 'instructions' && (
|
{activeTab === 'instructions' && (
|
||||||
<div className="flex flex-col flex-1 min-h-0 h-0">
|
<div className="flex flex-col flex-1 min-h-0 h-0">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
<label className={sectionHeaderStyles}>
|
<label className={sectionHeaderStyles}>
|
||||||
Instructions
|
Instructions
|
||||||
</label>
|
</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
|
<CustomButton
|
||||||
variant="primary"
|
variant="primary"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -475,6 +509,55 @@ export function AgentConfig({
|
||||||
Generate
|
Generate
|
||||||
</CustomButton>
|
</CustomButton>
|
||||||
</div>
|
</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>
|
||||||
|
</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-maximized"
|
||||||
|
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 className="flex-1 min-h-0 h-0">
|
<div className="flex-1 min-h-0 h-0">
|
||||||
<div className="text-sm h-full">
|
<div className="text-sm h-full">
|
||||||
<EditableField
|
<EditableField
|
||||||
|
|
@ -496,14 +579,74 @@ export function AgentConfig({
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'examples' && (
|
{activeTab === 'examples' && (
|
||||||
<div className="flex flex-col flex-1 min-h-0 h-0">
|
<div className="flex flex-col flex-1 min-h-0 h-0">
|
||||||
<label className={clsx(sectionHeaderStyles, "mb-4")}>
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
Examples
|
Examples
|
||||||
</label>
|
</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="flex items-center gap-2">
|
||||||
|
<label className={sectionHeaderStyles}>
|
||||||
|
Examples
|
||||||
|
</label>
|
||||||
|
<CustomButton
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setIsExamplesMaximized(false)}
|
||||||
|
showHoverContent={true}
|
||||||
|
hoverContent="Minimize"
|
||||||
|
>
|
||||||
|
<Minimize2 className="w-4 h-4" />
|
||||||
|
</CustomButton>
|
||||||
|
</div>
|
||||||
|
</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 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 className="flex-1 min-h-0 h-0">
|
<div className="flex-1 min-h-0 h-0">
|
||||||
<div className="text-sm h-full">
|
<div className="text-sm h-full">
|
||||||
<EditableField
|
<EditableField
|
||||||
|
|
@ -526,6 +669,7 @@ export function AgentConfig({
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue