AI Code

import { AICode } from "@/components/ui/ai-code"

export default function Editor() {
  const [code, setCode] = useState("")

  return (
    <AICode
      value={code}
      onChange={setCode}
      language="typescript"
      theme="vs-dark"
    />
  )
}

import { useState } from "react"

import { AICode } from "@/components/ui/ai-code"

export default function AICodeEditor() {
  const [code, setCode] = useState("")
  const [loading, setLoading] = useState(false)

  const handleGenerate = async (prompt: string) => {
    setLoading(true)

    const response = await fetch("/api/code/generate", {
      method: "POST",
      body: JSON.stringify({ prompt, language: "typescript" }),
    })

    const data = await response.json()
    setCode(data.code)
    setLoading(false)
  }

  return (
    <AICode
      value={code}
      onChange={setCode}
      language="typescript"
      onGenerate={handleGenerate}
      isGenerating={loading}
    />
  )
}

const handleExplain = async (code: string, lineNumber?: number) => {
  const response = await fetch("/api/code/explain", {
    method: "POST",
    body: JSON.stringify({ code, line: lineNumber }),
  })

  const data = await response.json()
  return data.explanation
}

;<AICode
  value={code}
  onChange={setCode}
  onExplain={handleExplain}
  showExplanations={true}
/>

import { useState } from "react"

import { AICode, CodeFeature } from "@/components/ui/ai-code"

export default function CodingAssistant() {
  const [code, setCode] = useState("")
  const [language, setLanguage] = useState("typescript")
  const [suggestions, setSuggestions] = useState([])

  const handleAIAction = async (
    feature: CodeFeature,
    code: string,
    context?: any
  ) => {
    const response = await fetch("/api/code/ai", {
      method: "POST",
      body: JSON.stringify({
        feature,
        code,
        language,
        context,
      }),
    })

    return await response.json()
  }

  return (
    <AICode
      value={code}
      onChange={setCode}
      language={language}
      onLanguageChange={setLanguage}
      // AI Features
      onGenerate={(prompt) => handleAIAction("generate", prompt)}
      onExplain={(code, line) => handleAIAction("explain", code, { line })}
      onRefactor={(code) => handleAIAction("refactor", code)}
      onDebug={(code) => handleAIAction("debug", code)}
      onTest={(code) => handleAIAction("test", code)}
      onDocument={(code) => handleAIAction("document", code)}
      onReview={(code) => handleAIAction("review", code)}
      // Features
      suggestions={suggestions}
      showLineNumbers={true}
      showMinimap={true}
      enableDiffView={true}
      enableChat={true}
    />
  )
}

// User prompt: "Create a function to sort an array of objects by a key"

// Generated code:
function sortByKey<T>(array: T[], key: keyof T): T[] {
  return array.sort((a, b) => {
    if (a[key] < b[key]) return -1
    if (a[key] > b[key]) return 1
    return 0
  })
}

// Code:
const result = array.reduce((acc, item) => acc + item.value, 0)

// Explanation:
// Line 1: Uses reduce() to iterate through the array
// - 'acc' is the accumulator (running total)
// - 'item' is the current array element
// - Adds item.value to the accumulator
// - Starts with initial value of 0
// Returns the sum of all values

// Original:
let sum = 0
for (let i = 0; i < array.length; i++) {
  sum += array[i]
}

// Refactored:
const sum = array.reduce((acc, val) => acc + val, 0)

// Original (buggy):
function divide(a, b) {
  return a / b
}

// Fixed:
function divide(a: number, b: number): number {
  if (b === 0) {
    throw new Error("Division by zero")
  }
  return a / b
}

// Function:
function isPalindrome(str: string): boolean {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, "")
  return cleaned === cleaned.split("").reverse().join("")
}

// Generated tests:
describe("isPalindrome", () => {
  it("should return true for palindromes", () => {
    expect(isPalindrome("racecar")).toBe(true)
    expect(isPalindrome("A man, a plan, a canal: Panama")).toBe(true)
  })

  it("should return false for non-palindromes", () => {
    expect(isPalindrome("hello")).toBe(false)
  })

  it("should handle empty strings", () => {
    expect(isPalindrome("")).toBe(true)
  })
})

// Original:
function fetchUser(id: string) {
  return fetch(`/api/users/${id}`).then((res) => res.json())
}

// With documentation:
/**
 * Fetches a user from the API by their ID
 * @param id - The unique identifier of the user
 * @returns Promise resolving to the user object
 * @throws Error if the fetch request fails
 */
function fetchUser(id: string): Promise<User> {
  return fetch(`/api/users/${id}`).then((res) => res.json())
}

## Code Review

### Strengths

- Clean, readable code
- Good variable naming
- Proper error handling

### Issues

- Missing type annotations (lines 5, 12)
- Potential null reference on line 8
- Consider extracting magic number on line 15

### Suggestions

1. Add TypeScript interfaces for data structures
2. Use optional chaining on line 8
3. Extract constants to top of file
4. Add input validation

### Security

- ⚠️ Potential XSS vulnerability on line 23 (user input not sanitized)

type CodeFeature =
  | "generate"
  | "explain"
  | "refactor"
  | "debug"
  | "test"
  | "document"
  | "review"

interface CodeSuggestion {
  id: string
  type: CodeFeature
  title: string
  description: string
  code?: string
  line?: number
  severity: "info" | "warning" | "error"
}

interface Explanation {
  id: string
  line: number
  content: string
  type: "explanation" | "suggestion" | "warning" | "error"
}

import OpenAI from "openai"

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

async function generateCode(prompt: string, language: string) {
  const response = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [
      {
        role: "system",
        content: `You are an expert ${language} programmer. Generate clean, efficient code.`,
      },
      { role: "user", content: prompt },
    ],
  })

  return response.choices[0].message.content
}

import Anthropic from "@anthropic-ai/sdk"

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })

async function explainCode(code: string, language: string) {
  const response = await anthropic.messages.create({
    model: "claude-3-opus-20240229",
    max_tokens: 1024,
    messages: [
      {
        role: "user",
        content: `Explain this ${language} code:\n\`\`\`${language}\n${code}\n\`\`\``,
      },
    ],
  })

  return response.content[0].text
}

// Use Copilot API for inline suggestions
async function getCompletions(code: string, position: number) {
  const response = await fetch("https://api.github.com/copilot/completions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${GITHUB_TOKEN}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      prompt: code,
      suffix: code.slice(position),
    }),
  })

  return await response.json()
}

const monacoOptions = {
  minimap: { enabled: true },
  fontSize: 14,
  lineNumbers: "on",
  roundedSelection: true,
  scrollBeyondLastLine: false,
  automaticLayout: true,
  tabSize: 2,
  wordWrap: "on",
  suggest: { preview: true },
  quickSuggestions: true,
  formatOnPaste: true,
  formatOnType: true,
}

<AICode
  value={originalCode}
  onChange={setCode}
  enableDiffView={true}
  diffCode={suggestedCode}
  onAcceptDiff={() => setCode(suggestedCode)}
  onRejectDiff={() => setShowDiff(false)}
/>

<AICode
  value={code}
  onChange={setCode}
  enableChat={true}
  onChatMessage={async (message) => {
    // Send to AI
    const response = await fetch("/api/code/chat", {
      method: "POST",
      body: JSON.stringify({ message, code }),
    })
    return await response.json()
  }}
/>