mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-31 06:42:06 +00:00
feat: Add conversational AI assistant panel for project codebase Q&A
Implement a slide-in chat panel that allows users to ask questions about their codebase using Claude Opus 4.5 with read-only access to project files. Backend changes: - Add SQLAlchemy models for conversation persistence (assistant_database.py) - Create AssistantChatSession with read-only Claude SDK client - Add WebSocket endpoint for real-time chat streaming - Include read-only MCP tools: feature_get_stats, feature_get_next, etc. Frontend changes: - Add floating action button (bottom-right) to toggle panel - Create slide-in panel component (400px width) - Implement WebSocket hook with reconnection logic - Add keyboard shortcut 'A' to toggle assistant Key features: - Read-only access: Only Read, Glob, Grep, WebFetch, WebSearch tools - Persistent history: Conversations saved to SQLite per project - Real-time streaming: Text chunks streamed as Claude generates response - Tool visibility: Shows when assistant is using tools to explore code 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Auto
176
ui/src/components/AssistantChat.tsx
Normal file
176
ui/src/components/AssistantChat.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
/**
|
||||
* Assistant Chat Component
|
||||
*
|
||||
* Main chat interface for the project assistant.
|
||||
* Displays messages and handles user input.
|
||||
*/
|
||||
|
||||
import { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { Send, Loader2, Wifi, WifiOff } from 'lucide-react'
|
||||
import { useAssistantChat } from '../hooks/useAssistantChat'
|
||||
import { ChatMessage } from './ChatMessage'
|
||||
|
||||
interface AssistantChatProps {
|
||||
projectName: string
|
||||
}
|
||||
|
||||
export function AssistantChat({ projectName }: AssistantChatProps) {
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null)
|
||||
const hasStartedRef = useRef(false)
|
||||
|
||||
// Memoize the error handler to prevent infinite re-renders
|
||||
const handleError = useCallback((error: string) => {
|
||||
console.error('Assistant error:', error)
|
||||
}, [])
|
||||
|
||||
const {
|
||||
messages,
|
||||
isLoading,
|
||||
connectionStatus,
|
||||
start,
|
||||
sendMessage,
|
||||
} = useAssistantChat({
|
||||
projectName,
|
||||
onError: handleError,
|
||||
})
|
||||
|
||||
// Auto-scroll to bottom on new messages
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, [messages])
|
||||
|
||||
// Start the chat session when component mounts (only once)
|
||||
useEffect(() => {
|
||||
if (!hasStartedRef.current) {
|
||||
hasStartedRef.current = true
|
||||
start()
|
||||
}
|
||||
}, [start])
|
||||
|
||||
// Focus input when not loading
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
inputRef.current?.focus()
|
||||
}
|
||||
}, [isLoading])
|
||||
|
||||
const handleSend = () => {
|
||||
const content = inputValue.trim()
|
||||
if (!content || isLoading) return
|
||||
|
||||
sendMessage(content)
|
||||
setInputValue('')
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Connection status indicator */}
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
{connectionStatus === 'connected' ? (
|
||||
<>
|
||||
<Wifi size={14} className="text-[var(--color-neo-done)]" />
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)]">Connected</span>
|
||||
</>
|
||||
) : connectionStatus === 'connecting' ? (
|
||||
<>
|
||||
<Loader2 size={14} className="text-[var(--color-neo-progress)] animate-spin" />
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)]">Connecting...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<WifiOff size={14} className="text-[var(--color-neo-danger)]" />
|
||||
<span className="text-xs text-[var(--color-neo-text-secondary)]">Disconnected</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Messages area */}
|
||||
<div className="flex-1 overflow-y-auto bg-[var(--color-neo-bg)]">
|
||||
{messages.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-neo-text-secondary)] text-sm">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span>Connecting to assistant...</span>
|
||||
</div>
|
||||
) : (
|
||||
<span>Ask me anything about the codebase</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-4">
|
||||
{messages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{isLoading && messages.length > 0 && (
|
||||
<div className="px-4 py-2 border-t-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
|
||||
<div className="flex items-center gap-2 text-[var(--color-neo-text-secondary)] text-sm">
|
||||
<div className="flex gap-1">
|
||||
<span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
||||
<span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
||||
<span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
||||
</div>
|
||||
<span>Thinking...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input area */}
|
||||
<div className="border-t-3 border-[var(--color-neo-border)] p-4 bg-white">
|
||||
<div className="flex gap-2">
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Ask about the codebase..."
|
||||
disabled={isLoading || connectionStatus !== 'connected'}
|
||||
className="
|
||||
flex-1
|
||||
neo-input
|
||||
resize-none
|
||||
min-h-[44px]
|
||||
max-h-[120px]
|
||||
py-2.5
|
||||
"
|
||||
rows={1}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={!inputValue.trim() || isLoading || connectionStatus !== 'connected'}
|
||||
className="
|
||||
neo-btn neo-btn-primary
|
||||
px-4
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
title="Send message"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Send size={18} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--color-neo-text-secondary)] mt-2">
|
||||
Press Enter to send, Shift+Enter for new line
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
35
ui/src/components/AssistantFAB.tsx
Normal file
35
ui/src/components/AssistantFAB.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* Floating Action Button for toggling the Assistant panel
|
||||
*/
|
||||
|
||||
import { MessageCircle, X } from 'lucide-react'
|
||||
|
||||
interface AssistantFABProps {
|
||||
onClick: () => void
|
||||
isOpen: boolean
|
||||
}
|
||||
|
||||
export function AssistantFAB({ onClick, isOpen }: AssistantFABProps) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`
|
||||
fixed bottom-6 right-6 z-50
|
||||
w-14 h-14
|
||||
flex items-center justify-center
|
||||
bg-[var(--color-neo-progress)] text-white
|
||||
border-3 border-[var(--color-neo-border)]
|
||||
rounded-full
|
||||
shadow-neo-md
|
||||
transition-all duration-200
|
||||
hover:shadow-neo-lg hover:-translate-y-0.5
|
||||
active:shadow-neo-sm active:translate-y-0.5
|
||||
${isOpen ? 'rotate-0' : ''}
|
||||
`}
|
||||
title={isOpen ? 'Close Assistant (Press A)' : 'Open Assistant (Press A)'}
|
||||
aria-label={isOpen ? 'Close Assistant' : 'Open Assistant'}
|
||||
>
|
||||
{isOpen ? <X size={24} /> : <MessageCircle size={24} />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
79
ui/src/components/AssistantPanel.tsx
Normal file
79
ui/src/components/AssistantPanel.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Assistant Panel Component
|
||||
*
|
||||
* Slide-in panel container for the project assistant chat.
|
||||
* Slides in from the right side of the screen.
|
||||
*/
|
||||
|
||||
import { X, Bot } from 'lucide-react'
|
||||
import { AssistantChat } from './AssistantChat'
|
||||
|
||||
interface AssistantPanelProps {
|
||||
projectName: string
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function AssistantPanel({ projectName, isOpen, onClose }: AssistantPanelProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop - click to close */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/20 z-40 transition-opacity duration-300"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
className={`
|
||||
fixed right-0 top-0 bottom-0 z-50
|
||||
w-[400px] max-w-[90vw]
|
||||
bg-white
|
||||
border-l-4 border-[var(--color-neo-border)]
|
||||
shadow-[-8px_0_0px_rgba(0,0,0,1)]
|
||||
transform transition-transform duration-300 ease-out
|
||||
flex flex-col
|
||||
${isOpen ? 'translate-x-0' : 'translate-x-full'}
|
||||
`}
|
||||
role="dialog"
|
||||
aria-label="Project Assistant"
|
||||
aria-hidden={!isOpen}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-progress)]">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-white border-2 border-[var(--color-neo-border)] p-1.5 shadow-[2px_2px_0px_rgba(0,0,0,1)]">
|
||||
<Bot size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-display font-bold text-white">Project Assistant</h2>
|
||||
<p className="text-xs text-white/80 font-mono">{projectName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="
|
||||
neo-btn neo-btn-ghost
|
||||
p-2
|
||||
bg-white/20 border-white/40
|
||||
hover:bg-white/30
|
||||
text-white
|
||||
"
|
||||
title="Close Assistant (Press A)"
|
||||
aria-label="Close Assistant"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Chat area */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{isOpen && <AssistantChat projectName={projectName} />}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user