implement components

agent/uis/open-code/proposed-change/index.tsx

@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+import "./index.css";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+
+interface ProposedChangeProps {
+  toolCallId: string;
+  change: string;
+  planItem: string;
+}
+
+export default function ProposedChange(props: ProposedChangeProps) {
+  const handleReject = () => {};
+  const handleAccept = () => {};
+
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-xl p-4 border-[1px] rounded-xl border-slate-200">
+      <p className="text-lg font-medium">Proposed Change</p>
+      <ReactMarkdown
+        children={props.change}
+        components={{
+          code(props) {
+            const { children, className, node: _node } = props;
+            const match = /language-(\w+)/.exec(className || "");
+            return match ? (
+              <SyntaxHighlighter
+                children={String(children).replace(/\n$/, "")}
+                language={match[1]}
+                style={coldarkDark}
+              />
+            ) : (
+              <code className={className}>{children}</code>
+            );
+          },
+        }}
+      />
+      <div className="flex gap-2 items-center w-full">
+        <Button variant="destructive" onClick={handleReject}>
+          Reject
+        </Button>
+        <Button onClick={handleAccept}>Accept</Button>
+      </div>
+    </div>
+  );
+}