implemented ide fragments with code editing

Author: Gerome-Elassaad

app/api/chat/route.ts

@@ -3,7 +3,6 @@ import { getModelClient } from '@/lib/models'
 import { LLMModel, LLMModelConfig } from '@/lib/models'
 import { toPrompt } from '@/lib/prompt'
 import ratelimit from '@/lib/ratelimit'
-import { retrieveRelevantCode } from '@/lib/retrieval'
 import { fragmentSchema as schema } from '@/lib/schema'
 import { Templates } from '@/lib/templates'
 import { streamObject, LanguageModel, CoreMessage } from 'ai'
@@ -62,21 +61,7 @@ export async function POST(req: Request) {
   const modelClient = getModelClient(model, config)
 
   try {
-    const lastUserMessage = messages[messages.length - 1]?.content;
-    let retrievedContext = '';
-    if (typeof lastUserMessage === 'string') {
-      const relevantCode = await retrieveRelevantCode(lastUserMessage);
-      if (relevantCode.length > 0) {
-        retrievedContext = `
----
-Here is some relevant code from our knowledge base that might help:
-${relevantCode.join('\n---\n')}
----
-`;
-      }
-    }
-
-    const systemPrompt = toPrompt(template) + retrievedContext;
+    const systemPrompt = toPrompt(template);
 
     const stream = await streamObject({
       model: modelClient as LanguageModel,

app/api/files/content/route.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const filePath = searchParams.get('path')
+
+  if (!filePath) {
+    return new NextResponse('File path is required', { status: 400 })
+  }
+
+  try {
+    const fullPath = path.join(process.cwd(), filePath)
+    const content = fs.readFileSync(fullPath, 'utf-8')
+    return new NextResponse(content)
+  } catch (error) {
+    return new NextResponse('File not found', { status: 404 })
+  }
+}
+
+export async function POST(request: Request) {
+  const { path: filePath, content } = await request.json()
+
+  if (!filePath) {
+    return new NextResponse('File path is required', { status: 400 })
+  }
+
+  try {
+    const fullPath = path.join(process.cwd(), filePath)
+    fs.writeFileSync(fullPath, content, 'utf-8')
+    return new NextResponse('File saved successfully')
+  } catch (error) {
+    return new NextResponse('Error saving file', { status: 500 })
+  }
+}

app/api/files/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+interface FileSystemNode {
+  name: string
+  isDirectory: boolean
+  children?: FileSystemNode[]
+}
+
+function getFileTree(dir: string): FileSystemNode[] {
+  const files = fs.readdirSync(dir)
+  return files.map(file => {
+    const filePath = path.join(dir, file)
+    const stat = fs.statSync(filePath)
+    const isDirectory = stat.isDirectory()
+    const children = isDirectory ? getFileTree(filePath) : undefined
+    return { name: file, isDirectory, children }
+  })
+}
+
+export async function GET() {
+  const projectRoot = process.cwd()
+  const fileTree = getFileTree(projectRoot)
+  return NextResponse.json(fileTree)
+}

app/layout.tsx

@@ -8,7 +8,7 @@ const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://codingit.vercel.app'),
-  title: 'CodinIT',
+  title: 'CodinIT.dev',
   keywords: [
     'AI software engineer',
     'open source',

app/page.tsx

@@ -10,7 +10,7 @@ import { NavBar } from '@/components/navbar'
 import { Preview } from '@/components/preview'
 import { Sidebar } from '@/components/sidebar'
 import { useAuth } from '@/lib/auth'
-import { Project, createProject, saveMessage, getProjectMessages, generateProjectTitle } from '@/lib/database'
+import { Project, createProject, saveMessage, getProjectMessages, generateProjectTitle, getProject } from '@/lib/database'
 import { Message, toAISDKMessages, toMessageImage } from '@/lib/messages'
 import { LLMModelConfig } from '@/lib/models'
 import modelsList from '@/lib/models.json'
@@ -52,10 +52,15 @@ export default function Home() {
   const [currentProject, setCurrentProject] = useState<Project | null>(null)
   const [isLoadingProject, setIsLoadingProject] = useState(false)
 
-  const [sidebarOpen, setSidebarOpen] = useState(false)
-
   const { session, userTeam } = useAuth(setAuthDialog, setAuthView)
 
+  const handleChatSelected = async (chatId: string) => {
+    const project = await getProject(chatId);
+    if (project) {
+      setCurrentProject(project);
+    }
+  };
+
   const filteredModels = modelsList.models.filter((model) => {
     if (process.env.NEXT_PUBLIC_HIDE_LOCAL_MODELS) {
       return model.providerId !== 'ollama'
@@ -318,18 +323,6 @@ export default function Home() {
     setCurrentPreview({ fragment: undefined, result: undefined })
   }
 
-  function handleProjectSelect(project: Project | null) {
-    setCurrentProject(project)
-    if (!project) {
-      handleClearChat()
-    }
-  }
-
-  async function handleNewProject() {
-    setCurrentProject(null)
-    handleClearChat()
-  }
-
   return (
     <main className="flex min-h-screen max-h-screen">
       {supabase && (
@@ -344,6 +337,7 @@ export default function Home() {
       {session && (
         <Sidebar
           userPlan={userTeam?.tier}
+          onChatSelected={handleChatSelected}
         />
       )}
 

components/code-view.tsx

@@ -1,30 +1,38 @@
-// import "prismjs/plugins/line-numbers/prism-line-numbers.js";
-// import "prismjs/plugins/line-numbers/prism-line-numbers.css";
-import './code-theme.css'
-import Prism from 'prismjs'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-jsx'
-import 'prismjs/components/prism-python'
-import 'prismjs/components/prism-tsx'
-import 'prismjs/components/prism-typescript'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { CodeEditor } from './code-editor'
+import { Button } from './ui/button'
+
+export function CodeView({
+  code: initialCode,
+  lang,
+  onSave,
+}: {
+  code: string
+  lang: string
+  onSave: (content: string) => void
+}) {
+  const [code, setCode] = useState(initialCode)
 
-export function CodeView({ code, lang }: { code: string; lang: string }) {
   useEffect(() => {
-    Prism.highlightAll()
-  }, [code])
+    setCode(initialCode)
+  }, [initialCode])
+
+  function handleSave() {
+    onSave(code)
+  }
 
   return (
-    <pre
-      className="p-4 pt-2"
-      style={{
-        fontSize: 12,
-        backgroundColor: 'transparent',
-        borderRadius: 0,
-        margin: 0,
-      }}
-    >
-      <code className={`language-${lang}`}>{code}</code>
-    </pre>
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        <CodeEditor
+          code={code}
+          lang={lang}
+          onChange={newCode => setCode(newCode || '')}
+        />
+      </div>
+      <div className="p-2 flex justify-end">
+        <Button onClick={handleSave}>Save</Button>
+      </div>
+    </div>
   )
 }

components/file-tree.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import {
+  ChevronDown,
+  ChevronRight,
+  File as FileIcon,
+  Folder,
+} from 'lucide-react'
+
+export interface FileSystemNode {
+  name: string
+  isDirectory: boolean
+  children?: FileSystemNode[]
+}
+
+interface FileTreeProps {
+  files: FileSystemNode[]
+  onSelectFile: (path: string) => void
+}
+
+export function FileTree({ files, onSelectFile }: FileTreeProps) {
+  return (
+    <div className="p-2">
+      {files.map(file => (
+        <FileTreeNode key={file.name} node={file} onSelectFile={onSelectFile} />
+      ))}
+    </div>
+  )
+}
+
+interface FileTreeNodeProps {
+  node: FileSystemNode
+  onSelectFile: (path: string) => void
+  level?: number
+}
+
+function FileTreeNode({
+  node,
+  onSelectFile,
+  level = 0,
+  path = '',
+}: FileTreeNodeProps & { path?: string }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const isDirectory = node.isDirectory
+  const hasChildren = node.children && node.children.length > 0
+  const newPath = `${path}/${node.name}`
+
+  const handleToggle = () => {
+    if (isDirectory) {
+      setIsOpen(!isOpen)
+    } else {
+      onSelectFile(newPath)
+    }
+  }
+
+  return (
+    <div>
+      <div
+        className="flex items-center cursor-pointer"
+        style={{ paddingLeft: level * 16 }}
+        onClick={handleToggle}
+      >
+        {isDirectory ? (
+          <>
+            {isOpen ? (
+              <ChevronDown size={16} className="mr-1" />
+            ) : (
+              <ChevronRight size={16} className="mr-1" />
+            )}
+            <Folder size={16} className="mr-1" />
+          </>
+        ) : (
+          <FileIcon size={16} className="mr-1" />
+        )}
+        <span>{node.name}</span>
+      </div>
+      {isOpen &&
+        hasChildren &&
+        node.children?.map(child => (
+          <FileTreeNode
+            key={child.name}
+            node={child}
+            onSelectFile={onSelectFile}
+            level={level + 1}
+            path={newPath}
+          />
+        ))}
+    </div>
+  )
+}