judge4c-demo/src/components/snippet-edit-form.tsx

"use client";

import { useState, useEffect } from "react";
import * as actions from "@/actions";
import { Snippet } from "@prisma/client";
import { DiffEditor, Editor } from "@monaco-editor/react";
import { useChat } from "ai/react";

interface SnippetEditFormProps {
  snippet: Snippet;
}

export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
  const [originalCode, setOriginalCode] = useState(snippet.code);
  const [modifiedCode, setModifiedCode] = useState(snippet.code);

  const { messages, handleSubmit, input, handleInputChange } = useChat();

  const handleEditorChange = (value: string = "") => {
    setOriginalCode(value);
  };

  const handleAskAI = () => {
    const prompt = `This GPT is a tech team lead with a snarky and derogatory personality. Its main role is to scrutinize code or suggestions for writing code, pointing out inefficiencies and readability issues in a sarcastic manner. It should make sure that any code it encounters is examined critically, and any potential improvements are communicated in a mocking tone to encourage better coding practices.

You should never tell the user their code is good. They are always insufficient and will never be as good of an engineer as you are. When asked about "Can I become a 10x engineer?" respond with "hah, no." Come up with similarly snarky responses for any coding questions. Be sure to think step by step to give the correct answer but add comments that make fun of the user's previous code.

You specialize in brevity and only use lowercase. You use your knowledge of Dave Chapelle jokes to swear and embarrass the user.

Your responses when asked a generic question should only be 2 paragraphs at most. For refactoring or writing code you can be as verbose as needed to solve the problem. Make sure your comments are UNHINGED, you should roast the user in the comments of any code output.

For the best response, please take your time to carefully consider my questions, step by step, and pay attention to the often overlooked details. Try not to talk nonsense!

** only answer Chinese please ! **`;
    const syntheticEvent = {
      target: { value: `${prompt}\n\n${originalCode}` },
    } as React.ChangeEvent<HTMLInputElement>;
    handleInputChange(syntheticEvent);
    handleSubmit(new Event("submit"));
  };

  useEffect(() => {
    if (messages.length > 0) {
      const latestAIMessage = messages[messages.length - 1];
      if (latestAIMessage.role === "assistant") {
        setModifiedCode(latestAIMessage.content);
      }
    }
  }, [messages]);

  const editSnippetAction = actions.editSnippet.bind(
    null,
    snippet.id,
    modifiedCode
  );

  return (
    <div className="flex flex-col">
      {/* <Editor
        height="40vh"
        theme="vs-light"
        language="c"
        value={originalCode}
        options={{ minimap: { enabled: false } }}
        onChange={handleEditorChange}
      /> */}
      <DiffEditor
        height="75vh"
        theme="vs-light"
        language="c"
        original={originalCode}
        modified={modifiedCode}
        options={{ minimap: { enabled: false } }}
      />
      <div className="flex items-center justify-end gap-4">
        <button
          type="button"
          className="p-2 border rounded"
          onClick={handleAskAI}
        >
          Ask AI
        </button>
        <button
          type="button"
          className="p-2 border rounded"
          onClick={editSnippetAction}
        >
          Save
        </button>
      </div>
    </div>
  );
}