Update frontend/src/components/CodeEditor.tsx

frontend/src/components/CodeEditor.tsx

@@ -1,7 +1,64 @@
-import React from 'react';
-import Editor from '@monaco-editor/react';
+import React, { useEffect, useRef } from 'react';
+import Editor, { OnMount } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+
+const CodeEditor: React.FC<{ filePath: string | null; projectPath: string }> = ({ filePath, projectPath }) => {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  const handleEditorDidMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+
+    // Register inline completion provider
+    monaco.languages.registerInlineCompletionsProvider('*', {
+      provideInlineCompletions: async (model, position, context, token) => {
+        const prefix = model.getValueInRange({
+          startLineNumber: 1,
+          startColumn: 1,
+          endLineNumber: position.lineNumber,
+          endColumn: position.column,
+        });
+        const suffix = model.getValueInRange({
+          startLineNumber: position.lineNumber,
+          startColumn: position.column,
+          endLineNumber: model.getLineCount(),
+          endColumn: model.getLineMaxColumn(model.getLineCount()),
+        });
+
+        try {
+          const resp = await fetch('/api/autocomplete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              prefix,
+              suffix,
+              filepath: filePath || '',
+              language: model.getLanguageId(),
+              max_tokens: 64,
+              model: 'groq-llama-3.1-8b-instant',
+            }),
+          });
+          if (!resp.ok) return { items: [] };
+          const data = await resp.json();
+          const completions = data.completions || [];
+          return {
+            items: completions.map((c: any) => ({
+              insertText: c.text,
+              range: {
+                startLineNumber: position.lineNumber,
+                startColumn: position.column,
+                endLineNumber: position.lineNumber,
+                endColumn: position.column,
+              },
+            })),
+          };
+        } catch (e) {
+          return { items: [] };
+        }
+      },
+      freeInlineCompletions: () => {},
+    });
+  };
 
-const CodeEditor: React.FC<{ filePath: string | null; projectPath: string }> = ({ filePath }) => {
   if (!filePath) return (
     <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)', fontSize: 14 }}>
       ← Select a file from the explorer to start editing
@@ -14,14 +71,15 @@ const CodeEditor: React.FC<{ filePath: string | null; projectPath: string }> = (
       defaultLanguage="typescript"
       theme="vs-dark"
       path={filePath}
+      onMount={handleEditorDidMount}
       loading={<div style={{ color: 'var(--text-secondary)', padding: 20 }}>Loading editor...</div>}
       options={{
         fontSize: 13,
         minimap: { enabled: true },
         smoothScrolling: true,
         cursorBlinking: 'smooth',
+        inlineSuggest: { enabled: true },
       }}
-      value={`// ${filePath}\n// Start editing...`}
     />
   );
 };