apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-13 17:22:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clean up agent config UX

Browse source
This commit is contained in:
akhisud3195 2025-07-11 18:48:49 +05:30
parent b52e4b952b
commit 99053c4360
3 changed files with 184 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/rowboat/app/globals.css
View file

@ -15,11 +15,11 @@
} }
.custom-scrollbar { .custom-scrollbar {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #E4E4E7 transparent; scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
} }
.custom-scrollbar::-webkit-scrollbar { .custom-scrollbar::-webkit-scrollbar {
width: 6px; width: 4px;
} }
.custom-scrollbar::-webkit-scrollbar-track { .custom-scrollbar::-webkit-scrollbar-track {
@ -27,17 +27,19 @@
} }
.custom-scrollbar::-webkit-scrollbar-thumb { .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #E4E4E7; background-color: rgba(156, 163, 175, 0.3);
border-radius: 3px; border-radius: 4px;
border: none;
} }
/* Dark mode */ /* Dark mode */
.dark .custom-scrollbar { .dark .custom-scrollbar {
scrollbar-color: #3F3F46 transparent; scrollbar-color: rgba(63, 63, 70, 0.4) transparent;
} }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { .dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #3F3F46; background-color: rgba(63, 63, 70, 0.4);
border: none;
} }
} }

108
apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
View file

@ -89,6 +89,19 @@ export function AgentConfig({
setLocalName(agent.name); setLocalName(agent.name);
}, [agent.name]); }, [agent.name]);
// Store active tab in URL hash to persist across re-renders
useEffect(() => {
const hash = window.location.hash.slice(1);
if (hash === 'instructions' || hash === 'configurations') {
setActiveTab(hash as TabType);
}
}, []);
const handleTabChange = (tab: TabType) => {
setActiveTab(tab);
window.location.hash = tab;
};
// Track changes in RAG datasources // Track changes in RAG datasources
useEffect(() => { useEffect(() => {
const currentSources = agent.ragDataSources || []; const currentSources = agent.ragDataSources || [];
@ -198,7 +211,7 @@ export function AgentConfig({
{(['instructions', 'configurations'] as TabType[]).map((tab) => ( {(['instructions', 'configurations'] as TabType[]).map((tab) => (
<button <button
key={tab} key={tab}
onClick={() => setActiveTab(tab)} onClick={() => handleTabChange(tab)}
className={clsx( className={clsx(
"px-4 py-2 text-sm font-medium transition-colors relative", "px-4 py-2 text-sm font-medium transition-colors relative",
activeTab === tab activeTab === tab
@ -387,9 +400,8 @@ export function AgentConfig({
{activeTab === 'configurations' && ( {activeTab === 'configurations' && (
<div className="space-y-6"> <div className="space-y-8">
{!agent.locked && ( {!agent.locked && (
<div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<label className={sectionHeaderStyles}> <label className={sectionHeaderStyles}>
Name Name
@ -424,10 +436,8 @@ export function AgentConfig({
<p className="text-sm text-red-500">{nameError}</p> <p className="text-sm text-red-500">{nameError}</p>
)} )}
</div> </div>
</div>
)} )}
<div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<label className={sectionHeaderStyles}> <label className={sectionHeaderStyles}>
Description Description
@ -445,9 +455,8 @@ export function AgentConfig({
autoResize autoResize
/> />
</div> </div>
</div>
<div className="space-y-4"> <div className="space-y-2">
<div className="flex items-center"> <div className="flex items-center">
<label className={sectionHeaderStyles}> <label className={sectionHeaderStyles}>
Agent Type Agent Type
@ -479,7 +488,7 @@ export function AgentConfig({
/> />
</div> </div>
<div className="space-y-4"> <div className="space-y-2">
<div className="flex items-center"> <div className="flex items-center">
<label className={sectionHeaderStyles}> <label className={sectionHeaderStyles}>
Model Model
@ -564,7 +573,7 @@ export function AgentConfig({
</div> </div>
{agent.outputVisibility === "internal" && ( {agent.outputVisibility === "internal" && (
<div className="space-y-4"> <div className="space-y-2">
<div className="flex items-center"> <div className="flex items-center">
<label className={sectionHeaderStyles}> <label className={sectionHeaderStyles}>
Max calls from parent agent per turn Max calls from parent agent per turn
@ -596,7 +605,7 @@ export function AgentConfig({
)} )}
{USE_TRANSFER_CONTROL_OPTIONS && ( {USE_TRANSFER_CONTROL_OPTIONS && (
<div className="space-y-4"> <div className="space-y-2">
<label className={sectionHeaderStyles}> <label className={sectionHeaderStyles}>
Conversation control after turn Conversation control after turn
</label> </label>
@ -623,8 +632,7 @@ export function AgentConfig({
)} )}
{useRag && ( {useRag && (
<div className="space-y-6"> <div className="space-y-2">
<div className="space-y-4">
<div className="flex items-center"> <div className="flex items-center">
<label className={sectionHeaderStyles}> <label className={sectionHeaderStyles}>
RAG DATA SOURCES RAG DATA SOURCES
@ -669,7 +677,9 @@ export function AgentConfig({
)} )}
</div> </div>
</div> </div>
)}
{agent.ragDataSources !== undefined && agent.ragDataSources.length > 0 && (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{(agent.ragDataSources || []).map((source) => { {(agent.ragDataSources || []).map((source) => {
const ds = dataSources.find((ds) => ds._id === source); const ds = dataSources.find((ds) => ds._id === source);
@ -722,80 +732,6 @@ export function AgentConfig({
); );
})} })}
</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>
)} )}

17
apps/rowboat/app/styles/quill-mentions.css
View file

@ -65,3 +65,20 @@
background-color: #f59e0b !important; background-color: #f59e0b !important;
color: white !important; color: white !important;
} }
/* Quill editor font size in editing mode */
.ql-editor {
font-size: 1rem !important; /* Increase base font size */
line-height: 1.6 !important; /* Adjust line height for better readability */
}
/* Keep the rendered markdown view at its original size */
.ql-editor.ql-blank::before {
font-size: 1rem !important; /* Match placeholder text size */
font-style: italic;
}
/* Ensure mentions maintain proper size */
.ql-editor .mention {
font-size: inherit !important;
}