gen website AI

apps/quick-dapp/src/App.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useReducer, useState } from 'react';
 import { IntlProvider } from 'react-intl'
 import CreateInstance from './components/CreateInstance';
 import EditInstance from './components/EditInstance';
+import EditHtmlTemplate from './components/EditHtmlTemplate';
 import DeployPanel from './components/DeployPanel';
 import LoadingScreen from './components/LoadingScreen';
 import { appInitialState, appReducer } from './reducers/state';
@@ -52,7 +53,11 @@ function App(): JSX.Element {
       }}
     >
       <IntlProvider locale={locale.code} messages={locale.messages}>
-        {Object.keys(appState.instance.abi).length > 0 ? (
+        {appState.instance.htmlTemplate ? (
+          <div className="container-fluid pt-3">
+            <EditHtmlTemplate />
+          </div>
+        ) : Object.keys(appState.instance.abi).length > 0 ? (
           <div className="row m-0 pt-3">
             <EditInstance />
             <DeployPanel />

apps/quick-dapp/src/actions/index.ts

@@ -158,15 +158,7 @@ export const deploy = async (payload: any, callback: any) => {
     }
   }
 
-  const { data } = await axios.get(
-    // It's the json file contains all the static files paths of dapp-template.
-    // It's generated through the build process automatically.
-    `${window.origin}/plugins/remix-dapp/manifest.json`
-  );
-
-  const paths = Object.keys(data);
-
-  const { logo, ...instance } = state.instance;
+  const { logo, htmlTemplate, ...instance } = state.instance;
 
   const instanceJson = JSON.stringify({
     ...instance,
@@ -179,29 +171,35 @@ export const deploy = async (payload: any, callback: any) => {
     'dir/assets/instance.json': instanceJson,
   };
 
-  // console.log(
-  //   JSON.stringify({
-  //     ...instance,
-  //     shareTo: payload.shareTo,
-  //   })
-  // );
-
-  for (let index = 0; index < paths.length; index++) {
-    const path = paths[index];
-    // download all the static files from the dapp-template domain.
-    // here is the codebase of dapp-template: https://github.com/drafish/remix-dapp
-    const resp = await axios.get(`${window.origin}/plugins/remix-dapp/${path}`);
-    files[`dir/${path}`] = resp.data;
+  // Use the HTML template provided by the user instead of downloading dapp-template
+  if (htmlTemplate) {
+    files['dir/index.html'] = htmlTemplate;
+  } else {
+    // Fallback to the old method if no HTML template is provided
+    const { data } = await axios.get(
+      `${window.origin}/plugins/remix-dapp/manifest.json`
+    );
+
+    const paths = Object.keys(data);
+
+    for (let index = 0; index < paths.length; index++) {
+      const path = paths[index];
+      const resp = await axios.get(`${window.origin}/plugins/remix-dapp/${path}`);
+      files[`dir/${path}`] = resp.data;
+    }
+
+    if (files['dir/index.html']) {
+      files['dir/index.html'] = files['dir/index.html'].replace(
+        'assets/css/themes/remix-dark_tvx1s2.css',
+        themeMap[instance.theme].url
+      );
+    }
   }
 
   if (logo) {
     files['dir/assets/logo.png'] = logo
   }
   files['dir/CORS'] = '*'
-  files['dir/index.html'] = files['dir/index.html'].replace(
-    'assets/css/themes/remix-dark_tvx1s2.css',
-    themeMap[instance.theme].url
-  );
 
   try {
     await surgeClient.publish({
@@ -287,8 +285,27 @@ export const initInstance = async ({
   methodIdentifiers,
   devdoc,
   solcVersion,
+  htmlTemplate,
   ...payload
 }: any) => {
+  // If HTML template is provided, use simplified initialization
+  if (htmlTemplate) {
+    await dispatch({
+      type: 'SET_INSTANCE',
+      payload: {
+        ...payload,
+        htmlTemplate,
+        abi: {},
+        items: {},
+        containers: [],
+        natSpec: { checked: false, methods: {} },
+        solcVersion: solcVersion ? getVersion(solcVersion) : { version: '0.8.25', canReceive: true },
+      },
+    });
+    return;
+  }
+
+  // Original ABI-based initialization (kept for backward compatibility)
   const functionHashes: any = {};
   const natSpec: any = { checked: false, methods: {} };
   if (methodIdentifiers && devdoc) {
@@ -324,18 +341,20 @@ export const initInstance = async ({
 
   const abi: any = {};
   const lowLevel: any = {}
-  payload.abi.forEach((item: any) => {
-    if (item.type === 'function') {
-      item.id = encodeFunctionId(item);
-      abi[item.id] = item;
-    }
-    if (item.type === 'fallback') {
-      lowLevel.fallback = item;
-    }
-    if (item.type === 'receive') {
-      lowLevel.receive = item;
-    }
-  });
+  if (payload.abi) {
+    payload.abi.forEach((item: any) => {
+      if (item.type === 'function') {
+        item.id = encodeFunctionId(item);
+        abi[item.id] = item;
+      }
+      if (item.type === 'fallback') {
+        lowLevel.fallback = item;
+      }
+      if (item.type === 'receive') {
+        lowLevel.receive = item;
+      }
+    });
+  }
   const ids = Object.keys(abi);
   const items =
     ids.length > 2
@@ -345,8 +364,6 @@ export const initInstance = async ({
       }
       : { A: ids };
 
-  // const logo = await axios.get('https://dev.remix-dapp.pages.dev/logo.png', { responseType: 'arraybuffer' })
-
   await dispatch({
     type: 'SET_INSTANCE',
     payload: {
@@ -355,9 +372,8 @@ export const initInstance = async ({
       items,
       containers: Object.keys(items),
       natSpec,
-      solcVersion: getVersion(solcVersion),
+      solcVersion: solcVersion ? getVersion(solcVersion) : { version: '0.8.25', canReceive: true },
       ...lowLevel,
-      // logo: logo.data,
     },
   });
 };
@@ -394,6 +410,7 @@ export const emptyInstance = async () => {
       name: '',
       address: '',
       network: '',
+      htmlTemplate: '',
       abi: {},
       items: {},
       containers: [],

apps/quick-dapp/src/components/ChatBox/ChatBox.css

@@ -0,0 +1,122 @@
+.chat-box-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  background: var(--body-bg);
+}
+
+.chat-box-header {
+  background: var(--secondary);
+  color: var(--text);
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.chat-box-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--body-bg);
+}
+
+.messages-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.message {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.user-message {
+  align-items: flex-end;
+}
+
+.assistant-message {
+  align-items: flex-start;
+}
+
+.message-role {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.message-content {
+  max-width: 70%;
+  padding: 10px 14px;
+  border-radius: 8px;
+  word-wrap: break-word;
+}
+
+.user-message .message-content {
+  background: var(--primary);
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.assistant-message .message-content {
+  background: var(--light);
+  color: var(--text);
+  border-bottom-left-radius: 4px;
+}
+
+.typing-indicator {
+  display: inline-block;
+  animation: typing 1.4s infinite;
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    opacity: 0.3;
+  }
+  30% {
+    opacity: 1;
+  }
+}
+
+.chat-box-footer {
+  padding: 12px;
+  border-top: 1px solid var(--border);
+  background: var(--body-bg);
+}
+
+.chat-input-group {
+  display: flex;
+  gap: 8px;
+}
+
+.chat-input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--border);
+  background: var(--body-bg);
+  color: var(--text);
+}
+
+.chat-input:focus {
+  border-color: var(--primary);
+  background: var(--body-bg);
+  color: var(--text);
+}
+
+.send-button {
+  align-self: flex-end;
+  min-width: 80px;
+}