Standalone sidecar (Run ID: codestoryai_sidecar_issue_2112_4659423c)

frontend/README.md

@@ -0,0 +1,89 @@
+# Sidecar Frontend
+
+A standalone frontend for the Sidecar AI assistant, built with Next.js, TypeScript, and CodeMirror.
+
+## Features
+
+- File explorer to browse and select files
+- Code editor with syntax highlighting for various languages
+- Chat interface to interact with Sidecar AI
+- Split panel layout for optimal workspace organization
+
+## Prerequisites
+
+- Node.js 18+ and npm/yarn
+- Sidecar webserver running locally
+
+## Getting Started
+
+1. Clone this repository
+2. Install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+```
+
+3. Make sure the Sidecar webserver is running:
+
+```bash
+# In the sidecar repository
+cargo build --bin webserver
+./target/debug/webserver
+```
+
+4. Start the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+5. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+## Configuration
+
+The frontend is configured to proxy API requests to the Sidecar webserver running on port 3000. If your Sidecar webserver is running on a different port, update the `next.config.js` file:
+
+```javascript
+async rewrites() {
+  return [
+    {
+      source: '/api/:path*',
+      destination: 'http://localhost:YOUR_PORT/api/:path*', // Change to your port
+    },
+  ];
+}
+```
+
+## Usage
+
+1. Browse files in the file explorer panel
+2. Click on a file to open it in the code editor
+3. Edit files directly in the code editor
+4. Use the chat interface to interact with Sidecar AI
+5. Ask questions about your code or request assistance with coding tasks
+
+## Building for Production
+
+To build the application for production:
+
+```bash
+npm run build
+# or
+yarn build
+```
+
+Then start the production server:
+
+```bash
+npm run start
+# or
+yarn start
+```
+
+## License
+
+This project is licensed under the same license as the Sidecar project.

frontend/components/ChatInterface.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { FiSend, FiSettings } from 'react-icons/fi';
+import { sendAgentMessage } from '@/services/api';
+
+interface ChatMessage {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+interface ChatInterfaceProps {
+  selectedFile: string | null;
+  allFiles: string[];
+}
+
+const ChatInterface: React.FC<ChatInterfaceProps> = ({ selectedFile, allFiles }) => {
+  const [message, setMessage] = useState<string>('');
+  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleSendMessage = async () => {
+    if (!message.trim()) return;
+
+    // Add user message to chat history
+    const updatedHistory = [...chatHistory, { role: 'user', content: message }];
+    setChatHistory(updatedHistory);
+
+    // Clear input
+    setMessage('');
+    setLoading(true);
+
+    try {
+      // Send message to sidecar API
+      await sendAgentMessage({
+        sessionId: 'frontend-session',
+        exchangeId: `exchange-${Date.now()}`,
+        editorUrl: window.location.origin,
+        query: message,
+        userContext: {
+          visibleFiles: selectedFile ? [selectedFile] : [],
+          openFiles: selectedFile ? [selectedFile] : [],
+        },
+        repoRef: {
+          name: 'local',
+          url: '',
+        },
+        projectLabels: [],
+        rootDirectory: '.',
+        accessToken: '',
+        modelConfiguration: {
+          fastModel: 'gpt-3.5-turbo',
+          slowModel: 'gpt-4',
+        },
+        allFiles,
+        openFiles: selectedFile ? [selectedFile] : [],
+        shell: 'bash',
+      });
+
+      // In a real implementation, we would handle streaming responses here
+      // For now, we'll just add a placeholder response
+      setChatHistory([
+        ...updatedHistory, 
+        { 
+          role: 'assistant', 
+          content: 'I received your message. In a real implementation, this would be a streaming response from the Sidecar API.' 
+        }
+      ]);
+    } catch (error) {
+      console.error('Error sending message:', error);
+      setChatHistory([
+        ...updatedHistory, 
+        { 
+          role: 'assistant', 
+          content: 'Error: Could not connect to server' 
+        }
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-2 border-b border-border flex justify-between items-center">
+        <h2 className="text-lg font-semibold">Chat</h2>
+        <button className="p-1 hover:bg-gray-800 rounded">
+          <FiSettings />
+        </button>
+      </div>
+
+      <div className="flex-grow overflow-auto p-4">
+        {chatHistory.map((msg, index) => (
+          <div 
+            key={index} 
+            className={`mb-4 ${msg.role === 'user' ? 'text-right' : 'text-left'}`}
+          >
+            <div 
+              className={`inline-block p-3 rounded-lg ${
+                msg.role === 'user' 
+                  ? 'bg-primary text-white rounded-tr-none' 
+                  : 'bg-gray-800 text-white rounded-tl-none'
+              }`}
+            >
+              {msg.content}
+            </div>
+          </div>
+        ))}
+        {loading && (
+          <div className="text-left mb-4">
+            <div className="inline-block p-3 rounded-lg bg-gray-800 text-white rounded-tl-none">
+              Thinking...
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="p-2 border-t border-border">
+        <div className="flex">
+          <input
+            type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+            placeholder="Ask Sidecar..."
+            className="flex-grow bg-gray-800 text-white p-2 rounded-l-md focus:outline-none"
+            disabled={loading}
+          />
+          <button 
+            onClick={handleSendMessage}
+            className={`text-white p-2 rounded-r-md ${
+              loading ? 'bg-gray-600 cursor-not-allowed' : 'bg-primary hover:bg-blue-600'
+            }`}
+            disabled={loading}
+          >
+            <FiSend />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface;

frontend/components/CodeEditor.tsx

@@ -0,0 +1,158 @@
+import dynamic from 'next/dynamic';
+import { javascript } from '@codemirror/lang-javascript';
+import { python } from '@codemirror/lang-python';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+import { readFile, editFile } from '@/services/api';
+import { useEffect, useState } from 'react';
+
+// Dynamically import CodeMirror to avoid SSR issues
+const CodeMirror = dynamic(
+  () => import('@uiw/react-codemirror').then((mod) => mod.default),
+  { ssr: false }
+);
+
+interface CodeEditorProps {
+  selectedFile: string | null;
+}
+
+const CodeEditor: React.FC<CodeEditorProps> = ({ selectedFile }) => {
+  const [fileContent, setFileContent] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchFileContent = async () => {
+      if (!selectedFile) {
+        setFileContent('');
+        return;
+      }
+
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await readFile(selectedFile);
+        setFileContent(response.content || '');
+        setSaved(true);
+      } catch (err) {
+        console.error('Error fetching file content:', err);
+        setError('Failed to load file content');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFileContent();
+  }, [selectedFile]);
+
+  const handleCodeChange = (value: string) => {
+    setFileContent(value);
+    setSaved(false);
+  };
+
+  const handleSaveFile = async () => {
+    if (!selectedFile) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      await editFile(selectedFile, fileContent);
+      setSaved(true);
+    } catch (err) {
+      console.error('Error saving file:', err);
+      setError('Failed to save file');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Get language support based on file extension
+  const getLanguageExtension = () => {
+    if (!selectedFile) return javascript();
+
+    if (selectedFile.endsWith('.js') || selectedFile.endsWith('.jsx') || 
+        selectedFile.endsWith('.ts') || selectedFile.endsWith('.tsx')) {
+      return javascript();
+    } else if (selectedFile.endsWith('.py')) {
+      return python();
+    }
+
+    return javascript(); // Default to JavaScript
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex justify-between items-center mb-2">
+        <h2 className="text-lg font-semibold truncate">
+          {selectedFile || 'No file selected'}
+          {!saved && <span className="text-yellow-500 ml-2">*</span>}
+        </h2>
+        {selectedFile && (
+          <button
+            onClick={handleSaveFile}
+            disabled={loading || saved}
+            className={`px-2 py-1 rounded text-sm ${
+              saved 
+                ? 'bg-gray-700 text-gray-400 cursor-not-allowed' 
+                : 'bg-primary text-white hover:bg-blue-600'
+            }`}
+          >
+            {loading ? 'Saving...' : 'Save'}
+          </button>
+        )}
+      </div>
+
+      {error && (
+        <div className="text-red-500 mb-2 text-sm">
+          {error}
+        </div>
+      )}
+
+      <div className="flex-grow">
+        {selectedFile ? (
+          <CodeMirror
+            value={fileContent}
+            height="100%"
+            theme={vscodeDark}
+            extensions={[
+              getLanguageExtension(),
+              lintGutter(),
+              createLSPLinter()
+            ]}
+            onChange={handleCodeChange}
+            ref={editorRef}
+            basicSetup={{
+              lineNumbers: true,
+              highlightActiveLineGutter: true,
+              highlightSpecialChars: true,
+              foldGutter: true,
+              drawSelection: true,
+              dropCursor: true,
+              allowMultipleSelections: true,
+              indentOnInput: true,
+              syntaxHighlighting: true,
+              bracketMatching: true,
+              closeBrackets: true,
+              autocompletion: true,
+              rectangularSelection: true,
+              crosshairCursor: true,
+              highlightActiveLine: true,
+              highlightSelectionMatches: true,
+              closeBracketsKeymap: true,
+              searchKeymap: true,
+              foldKeymap: true,
+              completionKeymap: true,
+              lintKeymap: true,
+            }}
+          />
+        ) : (
+          <div className="h-full flex items-center justify-center text-gray-500">
+            Select a file to edit
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CodeEditor;