llm/SIA
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed auto approver

Browse Source
This commit is contained in:
Niels Geens
2024-11-22 17:11:06 +01:00
parent 8766a945c0
commit 69f4f8a6fc
8 changed files with 343 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/src/components/App.jsx
View File

@@ -25,6 +25,15 @@ const App = () => {
// LLM state
const [llms, setLlms] = useState({});
const [activeLlm, setActiveLlm] = useState(null);
// Auto approver state
const [autoApproverConfig, setAutoApproverConfig] = useState({
context_enabled: false,
response_enabled: false,
context_timeout: 5.0,
response_timeout: 10.0,
llm_name: null
});
// UI state
const [activeTab, setActiveTab] = useState(Tabs.CONTEXT);
@@ -37,6 +46,7 @@ const App = () => {
const contextWs = useWebSocket(`${wsRoot}/context`);
const tokenWs = useWebSocket(`${wsRoot}/token`);
const stdoutWs = useWebSocket(`${wsRoot}/stdout`);
const autoApproverWs = useWebSocket(`${wsRoot}/auto_approver`);
const [wsState, setWsState] = useState(WebSocketState.DISCONNECTED);
// Handle llm state changes
@@ -58,9 +68,6 @@ const App = () => {
return updated;
});
}
if (activeLlm === null) {
setActiveLlm(data.llm);
}
});
}, []);
@@ -96,6 +103,20 @@ const App = () => {
});
}, []);
// Handle auto approver config updates
useEffect(() => {
autoApproverWs.addMessageHandler((data) => {
setAutoApproverConfig(data.config);
});
}, []);
// Initialize active llm
useEffect(() => {
if (activeLlm === null && Object.keys(llms).length > 0) {
setActiveLlm(Object.keys(llms)[0]);
}
}, [llms, activeLlm]);
const handleNextLlm = () => {
const llmNames = Object.keys(llms);
const currentIndex = llmNames.indexOf(activeLlm);
@@ -147,9 +168,25 @@ const App = () => {
const resetLlms = {};
for (const llm of Object.keys(llms)) {
resetLlms[llm] = LlmState.NO_OUTPUT;
} setLlms(resetLlms);
}
setLlms(resetLlms);
setModifiedContext(context);
}
};
const handleAutoApproverConfigChange = async (config) => {
try {
const response = await fetch('/api/auto_approver/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config)
});
if (!response.ok) {
throw new Error('Failed to update auto approver config');
}
} catch (error) {
console.error('Error updating auto approver config:', error);
}
};
useEffect(() => {
const state = llms[activeLlm];
@@ -168,14 +205,22 @@ const App = () => {
}, [llms[activeLlm]]);
useEffect(() => {
if (llmWs.wsState === WebSocketState.CONNECTED && contextWs.wsState === WebSocketState.CONNECTED && tokenWs.wsState === WebSocketState.CONNECTED && stdoutWs.wsState === WebSocketState.CONNECTED) {
if (llmWs.wsState === WebSocketState.CONNECTED &&
contextWs.wsState === WebSocketState.CONNECTED &&
tokenWs.wsState === WebSocketState.CONNECTED &&
stdoutWs.wsState === WebSocketState.CONNECTED &&
autoApproverWs.wsState === WebSocketState.CONNECTED) {
setWsState(WebSocketState.CONNECTED);
} else if (llmWs.wsState === WebSocketState.CONNECTING || contextWs.wsState === WebSocketState.CONNECTING || tokenWs.wsState === WebSocketState.CONNECTING || stdoutWs.wsState === WebSocketState.CONNECTING) {
} else if (llmWs.wsState === WebSocketState.CONNECTING ||
contextWs.wsState === WebSocketState.CONNECTING ||
tokenWs.wsState === WebSocketState.CONNECTING ||
stdoutWs.wsState === WebSocketState.CONNECTING ||
autoApproverWs.wsState === WebSocketState.CONNECTING) {
setWsState(WebSocketState.CONNECTING);
} else {
setWsState(WebSocketState.DISCONNECTED);
}
}, [llmWs.wsState, contextWs.wsState, tokenWs.wsState, stdoutWs.wsState]);
}, [llmWs.wsState, contextWs.wsState, tokenWs.wsState, stdoutWs.wsState, autoApproverWs.wsState]);
return (
<div className="h-screen bg-gray-100 flex flex-col overflow-hidden">
@@ -233,12 +278,14 @@ const App = () => {
showDiff={showDiff}
input={input}
output={output}
autoApproverConfig={autoApproverConfig}
onApprove={handleApprove}
onToggleDiff={() => setShowDiff(!showDiff)}
onSendInput={handleSendInput}
onClearOutput={handleClearOutput}
onLlmChange={setActiveLlm}
onNextLlm={handleNextLlm}
onAutoApproverConfigChange={handleAutoApproverConfigChange}
/>
<FloatingButton onClick={() => setShowSidebar(!showSidebar)} />

106
web/src/components/Sidebar.jsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Input } from '@/components/ui/input';
import { LlmState } from '@/components/App';
export const Sidebar = ({
@@ -11,12 +13,14 @@ export const Sidebar = ({
showDiff,
input,
output,
autoApproverConfig,
onApprove,
onToggleDiff,
onSendInput,
onClearOutput,
onLlmChange,
onNextLlm,
onAutoApproverConfigChange,
}) => (
<aside className={`
fixed top-0 right-0 h-screen w-64 bg-white shadow-lg
@@ -25,6 +29,7 @@ export const Sidebar = ({
${showSidebar ? 'translate-x-0' : 'translate-x-full md:translate-x-0'}
`}>
<div className="p-4 space-y-4 overflow-y-auto h-full">
{/* Existing controls */}
<Select value={activeLlm} onValueChange={onLlmChange}>
<SelectTrigger>
<SelectValue placeholder="Select LLM" />
@@ -38,19 +43,11 @@ export const Sidebar = ({
</SelectContent>
</Select>
<Button
variant="outline"
onClick={onNextLlm}
className="w-full"
>
<Button variant="outline" onClick={onNextLlm} className="w-full">
Next LLM
</Button>
<Button
variant="outline"
onClick={onToggleDiff}
className="w-full"
>
<Button variant="outline" onClick={onToggleDiff} className="w-full">
{showDiff ? 'Hide Diff' : 'Show Diff'}
</Button>
@@ -66,21 +63,90 @@ export const Sidebar = ({
}
</Button>
<Button
onClick={onSendInput}
disabled={!input.trim()}
className="w-full"
>
<Button onClick={onSendInput} disabled={!input.trim()} className="w-full">
Send Input
</Button>
<Button
onClick={onClearOutput}
disabled={!output.trim()}
className="w-full"
>
<Button onClick={onClearOutput} disabled={!output.trim()} className="w-full">
Clear Output
</Button>
{/* Auto Approver Config */}
<div className="border-t pt-4">
<h3 className="font-medium mb-2">Auto Approver</h3>
<div className="space-y-2">
<div className="flex items-center justify-between">
<label>Context Auto-Approve</label>
<Switch
checked={autoApproverConfig.context_enabled}
onCheckedChange={(enabled) => onAutoApproverConfigChange({
...autoApproverConfig,
context_enabled: enabled
})}
/>
</div>
<div className="flex items-center justify-between">
<label>Response Auto-Approve</label>
<Switch
checked={autoApproverConfig.response_enabled}
onCheckedChange={(enabled) => onAutoApproverConfigChange({
...autoApproverConfig,
response_enabled: enabled
})}
/>
</div>
<div className="space-y-1">
<label className="text-sm">Context Timeout (s)</label>
<Input
type="number"
min="0"
step="0.1"
value={autoApproverConfig.context_timeout}
onChange={(e) => onAutoApproverConfigChange({
...autoApproverConfig,
context_timeout: parseFloat(e.target.value)
})}
/>
</div>
<div className="space-y-1">
<label className="text-sm">Response Timeout (s)</label>
<Input
type="number"
min="0"
step="0.1"
value={autoApproverConfig.response_timeout}
onChange={(e) => onAutoApproverConfigChange({
...autoApproverConfig,
response_timeout: parseFloat(e.target.value)
})}
/>
</div>
<div className="space-y-1">
<label className="text-sm">Auto-Approve LLM</label>
<Select
value={autoApproverConfig.llm_name}
onValueChange={(llm) => onAutoApproverConfigChange({
...autoApproverConfig,
llm_name: llm
})}
>
<SelectTrigger>
<SelectValue placeholder="Select LLM" />
</SelectTrigger>
<SelectContent>
{Object.keys(llms).map(llm => (
<SelectItem key={llm} value={llm}>{llm}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
</div>
</aside>
);