feat(ui): Add React based UI for the vibes at /app

This adds a completely separate frontend based on React because I
found that code gen works better with React once the application gets
bigger. In particular it was getting very hard to move past add
connectors and actions.

The idea is to replace the standard UI with this once it has been
tested. But for now it is available at /app in addition to the
original at /

Signed-off-by: Richard Palethorpe <io@richiejp.com>
This commit is contained in:
Richard Palethorpe
2025-03-24 14:36:18 +00:00
parent 438a65caf6
commit 71e66c651c
61 changed files with 6452 additions and 2 deletions

View File

@@ -0,0 +1,70 @@
import React from 'react';
/**
* Memory Settings section of the agent form
*/
const MemorySettingsSection = ({ formData, handleInputChange }) => {
return (
<div id="memory-section">
<h3 className="section-title">Memory Settings</h3>
<div className="mb-4">
<label htmlFor="memory_provider">Memory Provider</label>
<select
name="memory_provider"
id="memory_provider"
value={formData.memory_provider || 'local'}
onChange={handleInputChange}
className="form-control"
>
<option value="local">Local</option>
<option value="redis">Redis</option>
<option value="postgres">PostgreSQL</option>
</select>
</div>
<div className="mb-4">
<label htmlFor="memory_collection">Memory Collection</label>
<input
type="text"
name="memory_collection"
id="memory_collection"
value={formData.memory_collection || ''}
onChange={handleInputChange}
className="form-control"
placeholder="agent_memories"
/>
</div>
<div className="mb-4">
<label htmlFor="memory_url">Memory URL</label>
<input
type="text"
name="memory_url"
id="memory_url"
value={formData.memory_url || ''}
onChange={handleInputChange}
className="form-control"
placeholder="redis://localhost:6379"
/>
<small className="form-text text-muted">Connection URL for Redis or PostgreSQL</small>
</div>
<div className="mb-4">
<label htmlFor="memory_window_size">Memory Window Size</label>
<input
type="number"
name="memory_window_size"
id="memory_window_size"
min="1"
value={formData.memory_window_size || 10}
onChange={handleInputChange}
className="form-control"
/>
<small className="form-text text-muted">Number of recent messages to include in context window</small>
</div>
</div>
);
};
export default MemorySettingsSection;