feat: Sotopia aact frontend

examples/experimental/interview_frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

examples/experimental/interview_frontend/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/experimental/interview_frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/experimental/interview_frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

examples/experimental/interview_frontend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "interview_frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "<19.0.0",
+    "react-dom": "<19.0.0",
+    "next": "15.0.3",
+    "@codemirror/lang-css": "^6.3.0",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-python": "^6.1.6",
+    "@uiw/codemirror-theme-github": "^4.23.6",
+    "@uiw/react-codemirror": "^4.23.6",
+    "lucide-react": "^0.460.0",
+    "react-icons": "^5.3.0",
+    "socket.io-client": "^4.8.1"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3"
+  }
+}

examples/experimental/interview_frontend/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

examples/experimental/interview_frontend/src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

examples/experimental/interview_frontend/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "NextJS IDE",
+  description: "Interactive Development Environment",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

examples/experimental/interview_frontend/src/app/page.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import io, { Socket } from 'socket.io-client';
+import CodeEditor from '@/components/CodeEditor/CodeEditor';
+import { FileSystem } from '@/components/CodeEditor/FileSystem';
+import { Terminal } from '@/components/Terminal/Terminal';
+import { ChatInterface } from '@/components/ChatInterface/ChatInterface';
+import { Browser } from '@/components/Browser/Browser';
+import { Sidebar } from '@/components/Sidebar/Sidebar';
+import { SceneContext } from '@/components/Sidebar/SceneContext';
+
+type FilesType = {
+  [key: string]: string;
+};
+
+type PanelOption = 'fileSystem' | 'sceneContext';
+
+let socket: Socket;
+
+export default function Home() {
+  const [files, setFiles] = useState<FilesType>({
+    "/workspace/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Document</title>\n</head>\n<body>\n    <h1>Hello World</h1>\n</body>\n</html>",
+    "/workspace/style.css": "body {\n    background-color: #f0f0f0;\n    font-family: Arial, sans-serif;\n}",
+    "/workspace/script.js": "console.log('Hello, World!');",
+    "/workspace/interview.py": "# Python code here"
+  });
+
+  const [currentFile, setCurrentFile] = useState("/workspace/interview.py");
+  const [messages, setMessages] = useState<Array<{text: string, type: 'message' | 'status'}>>([]);
+  const [terminalMessages, setTerminalMessages] = useState<string[]>([]);
+  const [activeTab, setActiveTab] = useState<'editor' | 'browser'>('editor');
+  const [browserUrl, setBrowserUrl] = useState('https://example.com');
+  const [activePanel, setActivePanel] = useState<PanelOption>('fileSystem');
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    socket = io(process.env.NEXT_PUBLIC_SOCKET_URL || 'http://localhost:8000', {
+      transports: ['websocket'],
+      reconnection: true
+    });
+
+    socket.on('connect', () => {
+      setIsConnected(true);
+      console.log('Connected to server with ID:', socket.id);
+    });
+
+    socket.on('connect_error', (error) => {
+      console.error('Connection error:', error);
+      setIsConnected(false);
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleNewMessage = (data: any) => {
+      const messageData = JSON.parse(data.message);
+      if (messageData.data.data_type === "agent_action") {
+        handleAgentAction(messageData);
+      } else if (messageData.data.data_type === "text" && messageData.data.text.includes("CmdOutputObservation")) {
+        const parts = messageData.data.text.split("**CmdOutputObservation (source=None, exit code=0)**");
+        if (parts.length > 1) {
+          const outputText = parts[1].trim();
+          setTerminalMessages((prev) => [...prev, outputText]);
+        }
+      }
+    };
+
+    socket.on('new_message', handleNewMessage);
+    return () => {
+      socket.off('new_message', handleNewMessage);
+    };
+  }, [socket]);
+
+  const handleAgentAction = (messageData: any) => {
+    const actionType = messageData.data.action_type;
+    const agentName = messageData.data.agent_name;
+
+    switch (actionType) {
+      case "speak":
+        setMessages(prev => [...prev, {
+          text: `${agentName}: ${messageData.data.argument}`,
+          type: 'message' as const
+        }]);
+        break;
+      case "write":
+        const filePath = messageData.data.path;
+        const fileContent = messageData.data.argument;
+        setFiles(prevFiles => ({ ...prevFiles, [filePath]: fileContent }));
+        setActiveTab('editor');
+        setMessages(prev => [...prev, {
+          text: `${agentName} is writing code...`,
+          type: 'status' as const
+        }]);
+        break;
+      case "run":
+        setTerminalMessages(prev => [...prev, `$ ${messageData.data.argument}`]);
+        setMessages(prev => [...prev, {
+          text: `${agentName} is executing a command...`,
+          type: 'status' as const
+        }]);
+        break;
+      case "browse":
+        const url = messageData.data.argument;
+        setBrowserUrl(url);
+        setActiveTab('browser');
+        setMessages(prev => [...prev, {
+          text: `${agentName} is browsing ${url}`,
+          type: 'status' as const
+        }]);
+        break;
+    }
+  };
+
+  if (!isConnected) {
+    return <div className="flex items-center justify-center min-h-screen bg-gray-900 text-white">
+      Connecting to server...
+    </div>;
+  }
+
+  return (
+    <div className="flex h-screen bg-gray-900">
+      <Sidebar onSelect={setActivePanel} />
+      <div className="flex flex-1">
+        {activePanel === 'fileSystem' && (
+          <div id="file-explorer" className="w-64 bg-gray-800 border-r border-gray-700">
+            <FileSystem onFileSelect={setCurrentFile} />
+          </div>
+        )}
+        {activePanel === 'sceneContext' && (
+          <div id="scene-context" className="w-64 bg-gray-800 border-r border-gray-700">
+            <SceneContext />
+          </div>
+        )}
+        <div className="flex-1 flex flex-col">
+          <div className="flex border-b border-gray-700">
+            <button
+              onClick={() => setActiveTab('editor')}
+              className={`px-4 py-2 ${activeTab === 'editor' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:bg-gray-800'}`}
+            >
+              Code Editor
+            </button>
+            <button
+              onClick={() => setActiveTab('browser')}
+              className={`px-4 py-2 ${activeTab === 'browser' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:bg-gray-800'}`}
+            >
+              Browser
+            </button>
+          </div>
+          <div className="flex-1">
+            {activeTab === 'editor' ? (
+              <CodeEditor
+                code={files[currentFile]}
+                onChange={(newCode) => setFiles(prev => ({ ...prev, [currentFile]: newCode }))}
+                filename={currentFile}
+              />
+            ) : (
+              <Browser url={browserUrl} />
+            )}
+          </div>
+          <Terminal externalMessages={terminalMessages} socket={socket} />
+        </div>
+        <div className="w-[600px] border-l border-gray-700">
+          <ChatInterface messages={messages} socket={socket} />
+        </div>
+      </div>
+    </div>
+  );
+}