feat: add frontend conponents for AI Assist

Author: PraneshASP

app/.env.example

@@ -0,0 +1,11 @@
+# Sway Playground Environment Configuration
+
+# Server Configuration
+REACT_APP_SERVER_API=https://api.sway-playground.fuel.network
+REACT_APP_LOCAL_SERVER=false
+
+REACT_APP_AI_FEATURES_ENABLED=false
+REACT_APP_AI_BACKEND_URL=http://localhost:3002
+
+# Analytics
+REACT_APP_VERCEL_ANALYTICS=false

app/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

app/package-lock.json

@@ -9,6 +9,7 @@
     "@fuel-ui/react": "^0.23.3",
     "@fuels/connectors": "0.5.0",
     "@fuels/react": "0.36.0",
+    "@google/genai": "^1.5.1",
     "@mui/base": "^5.0.0-beta.2",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.46",
@@ -23,8 +24,11 @@
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^6.23.0",
     "react-scripts": "^5.0.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "remark": "^15.0.1",
     "typescript": "^5.4.5",
     "web-vitals": "^2.1.4"
   },
@@ -38,6 +42,7 @@
     "@types/node": "^16.18.32",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.3.1",

app/package.json

@@ -22,61 +22,37 @@ import { useGist } from "./features/editor/hooks/useGist";
 import { useSearchParams } from "react-router-dom";
 import Copyable from "./components/Copyable";
 import useTheme from "./context/theme";
+import { AIGenerationDialog } from "./features/ai/components/AIGenerationDialog";
+import { AI_FEATURES_ENABLED } from "./constants";
 
 const DRAWER_WIDTH = "40vw";
 
 function App() {
-  // The current sway code in the editor.
   const [swayCode, setSwayCode] = useState<string>(loadSwayCode());
-
-  // The current solidity code in the editor.
   const [solidityCode, setSolidityCode] = useState<string>(loadSolidityCode());
-
-  // An error message to display to the user.
   const [showSolidity, setShowSolidity] = useState(false);
-
-  // The most recent code that the user has requested to compile.
   const [codeToCompile, setCodeToCompile] = useState<string | undefined>(
     undefined,
   );
-
-  // The most recent code that the user has requested to transpile.
   const [codeToTranspile, setCodeToTranspile] = useState<string | undefined>(
     undefined,
   );
-
-  // Whether or not the current code in the editor has been compiled.
   const [isCompiled, setIsCompiled] = useState(false);
-
-  // The toolchain to use for compilation.
   const [toolchain, setToolchain] = useState<Toolchain>("testnet");
-
-  // The deployment state
   const [deployState, setDeployState] = useState(DeployState.NOT_DEPLOYED);
-
-  // Functions for reading and writing to the log output.
   const [log, updateLog] = useLog();
-
-  // The contract ID of the deployed contract.
   const [contractId, setContractId] = useState("");
-
-  // An error message to display to the user.
   const [drawerOpen, setDrawerOpen] = useState(false);
-
-  // The query parameters for the current URL.
   const [searchParams] = useSearchParams();
-
-  // The theme color for the app.
   const { themeColor } = useTheme();
+  const [aiDialogOpen, setAiDialogOpen] = useState(false);
 
-  // If showSolidity is toggled on, reset the compiled state.
   useEffect(() => {
     if (showSolidity) {
       setIsCompiled(false);
     }
   }, [showSolidity]);
 
-  // Load the query parameters from the URL and set the state accordingly. Gists are loaded in useGist.
   useEffect(() => {
     if (searchParams.get("transpile") === "true") {
       setShowSolidity(true);
@@ -106,7 +82,6 @@ function App() {
     [setSolidityCode],
   );
 
-  // Loading shared code by query parameter and get a function for creating sharable permalinks.
   const { newGist } = useGist(onSwayCodeChange, onSolidityCodeChange);
 
   const setError = useCallback(
@@ -144,7 +119,6 @@ function App() {
   const onCompileClick = useCallback(() => {
     track("Compile Click", { toolchain });
     if (showSolidity) {
-      // Transpile the Solidity code before compiling.
       track("Transpile");
       setCodeToTranspile(solidityCode);
     } else {
@@ -159,14 +133,30 @@ function App() {
     toolchain,
   ]);
 
+  const onAIAssistClick = useCallback(() => {
+    track("AI Assist Click");
+    setAiDialogOpen(true);
+  }, []);
+
+  const onAICodeGenerated = useCallback((code: string) => {
+    track("AI Code Generated");
+    onSwayCodeChange(code);
+    setAiDialogOpen(false);
+  }, [onSwayCodeChange]);
+
+  const onAICodeFixed = useCallback((fixedCode: string) => {
+    track("AI Code Fixed");
+    onSwayCodeChange(fixedCode);
+  }, [onSwayCodeChange]);
+
   useTranspile(
     codeToTranspile,
     setCodeToCompile,
     onSwayCodeChange,
     setError,
     updateLog,
   );
-  useCompile(codeToCompile, setError, setIsCompiled, updateLog, toolchain);
+  useCompile(codeToCompile, setError, setIsCompiled, updateLog, toolchain, onAICodeFixed);
 
   return (
     <div
@@ -188,6 +178,7 @@ function App() {
         showSolidity={showSolidity}
         setShowSolidity={setShowSolidity}
         updateLog={updateLog}
+        onAIAssistClick={AI_FEATURES_ENABLED ? onAIAssistClick : undefined}
       />
       <div
         style={{
@@ -215,6 +206,13 @@ function App() {
         contractId={contractId}
         updateLog={updateLog}
       />
+      {AI_FEATURES_ENABLED && (
+        <AIGenerationDialog
+          open={aiDialogOpen}
+          onClose={() => setAiDialogOpen(false)}
+          onCodeGenerated={onAICodeGenerated}
+        />
+      )}
       <Analytics />
     </div>
   );

app/src/App.tsx

@@ -7,3 +7,7 @@ export const LOCAL_SERVER_URI = "http://0.0.0.0:8080";
 export const SERVER_URI = process.env.REACT_APP_LOCAL_SERVER
   ? LOCAL_SERVER_URI
   : SERVER_API;
+
+// AI Configuration
+export const AI_BACKEND_URL = process.env.REACT_APP_AI_BACKEND_URL || 'http://localhost:3001';
+export const AI_FEATURES_ENABLED = process.env.REACT_APP_AI_FEATURES_ENABLED === 'true';