[refactor] simplify Status Check polling of Prototype Generation

TechQuery · TechQuery · commit a320a106a67d · 2025-10-23T00:40:06.000+08:00
[optimize] move Prototype Generator to Evaluation Scope lines
[optimize] update Upstream packages
diff --git a/components/Project/EvaluationDisplay.tsx b/components/Project/EvaluationDisplay.tsx
@@ -1,10 +1,19 @@
-import { RequirementEvaluation, UserRole } from '@idea2app/data-server';
+import {
+  PrototypeType,
+  PrototypeVersion,
+  RequirementEvaluation,
+  UserRole,
+} from '@idea2app/data-server';
 import { Box, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { FC, useContext } from 'react';
 
 import { i18n, I18nContext } from '../../models/Translation';
 import userStore from '../../models/User';
+import {
+  PrototypeGeneratorToolbar,
+  PrototypeGeneratorToolbarProps,
+} from './PrototypeGeneratorToolbar';
 
 export const DevelopmentScopeName = ({ t }: typeof i18n) => [
   t('product_prototype'),
@@ -14,7 +23,13 @@ export const DevelopmentScopeName = ({ t }: typeof i18n) => [
   t('server'),
 ];
 
-export const EvaluationDisplay: FC<RequirementEvaluation> = observer(
+export interface EvaluationDisplayProps
+  extends RequirementEvaluation,
+    Pick<PrototypeGeneratorToolbarProps, 'projectId' | 'messageId'> {
+  prototypes?: PrototypeVersion[];
+}
+
+export const EvaluationDisplay: FC<EvaluationDisplayProps> = observer(
   ({
     title,
     scopes = [],
@@ -25,6 +40,9 @@ export const EvaluationDisplay: FC<RequirementEvaluation> = observer(
     monthPeriod,
     budget,
     factor,
+    projectId,
+    messageId,
+    prototypes,
   }) => {
     const i18n = useContext(I18nContext);
     const { t } = i18n,
@@ -64,11 +82,29 @@ export const EvaluationDisplay: FC<RequirementEvaluation> = observer(
               {t('development_scopes')}
             </Typography>
             <Box component="ul" sx={{ mt: 0.5 }}>
-              {scopes.map(scope => (
-                <Box key={scope} component="li" sx={{ ml: 1 }}>
-                  {DevelopmentScopeName(i18n)[scope]}
-                </Box>
-              ))}
+              {scopes.map(scope => {
+                const prototypeType = (
+                  scope === 2 ? 'desktop' : scope === 3 ? 'mobile' : undefined
+                ) as PrototypeType;
+
+                return (
+                  <Box
+                    key={scope}
+                    component="li"
+                    sx={{ ml: 1, display: 'flex', alignItems: 'center', gap: 1 }}
+                  >
+                    {DevelopmentScopeName(i18n)[scope]}
+
+                    {prototypeType && (
+                      <PrototypeGeneratorToolbar
+                        {...{ projectId, messageId }}
+                        type={prototypeType}
+                        prototype={prototypes?.find(({ type }) => type === prototypeType)}
+                      />
+                    )}
+                  </Box>
+                );
+              })}
             </Box>
           </Box>
         )}
diff --git a/components/Project/PrototypeGeneratorToolbar.tsx b/components/Project/PrototypeGeneratorToolbar.tsx
@@ -1,16 +1,19 @@
-import { PrototypeVersion, PrototypeVersionStatus } from '@idea2app/data-server';
+import { PrototypeType, PrototypeVersion } from '@idea2app/data-server';
 import { Box, Button, CircularProgress, Link, Typography } from '@mui/material';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ObservedComponent } from 'mobx-react-helper';
-import { sleep } from 'web-utility';
+import { createRef } from 'react';
+import { inViewport, sleep } from 'web-utility';
 
 import { PrototypeVersionModel } from '../../models/PrototypeVersion';
 import { i18n, I18nContext } from '../../models/Translation';
 
 export interface PrototypeGeneratorToolbarProps {
   projectId: number;
   messageId: number;
+  type: PrototypeType;
+  prototype?: PrototypeVersion;
 }
 
 @observer
@@ -20,86 +23,55 @@ export class PrototypeGeneratorToolbar extends ObservedComponent<
 > {
   static contextType = I18nContext;
 
-  versionStore = new PrototypeVersionModel(this.props.projectId);
+  versionStore = new PrototypeVersionModel(this.props.projectId, this.props.type);
 
   @observable
-  accessor version: PrototypeVersion | undefined;
+  accessor version = this.props.prototype;
 
-  @observable
-  accessor isPolling = false;
+  private root = createRef<HTMLElement>();
 
   componentDidMount() {
-    void this.loadVersion();
-  }
-
-  componentDidUpdate(prevProps: PrototypeGeneratorToolbarProps) {
-    if (prevProps.messageId !== this.props.messageId) {
-      void this.loadVersion();
-    }
-
-    if (this.version?.status === 'processing') {
-      this.startPolling();
-    }
-  }
-
-  componentWillUnmount() {
-    this.isPolling = false;
-  }
+    super.componentDidMount();
 
-  async loadVersion() {
-    const existingVersion = await this.versionStore.getVersionByMessageId(this.props.messageId);
-    this.version = existingVersion;
+    this.pollStatusCheck();
   }
 
-  async startPolling() {
-    if (this.isPolling) return;
+  async pollStatusCheck() {
+    const { props, version } = this,
+      rootElement = this.root.current;
 
-    this.isPolling = true;
+    while (version?.status === 'pending' || version?.status === 'processing') {
+      if (!rootElement?.isConnected) break;
 
-    for (let i = 0; i < 100; i++) {
-      if (!this.isPolling) break;
+      if (inViewport(rootElement))
+        this.version = await this.versionStore.getOne(props.prototype!.id);
 
       await sleep(3);
-
-      const updatedVersion = await this.versionStore.getVersionByMessageId(this.props.messageId);
-      this.version = updatedVersion;
-
-      if (updatedVersion?.status === 'completed' || updatedVersion?.status === 'failed') {
-        this.isPolling = false;
-        break;
-      }
     }
-
-    this.isPolling = false;
   }
 
   handleGenerateClick = async () => {
-    try {
-      const newVersion = await this.versionStore.updateOne({
-        evaluationMessage: this.props.messageId,
-      });
-      if (newVersion) {
-        this.version = newVersion;
-      }
-    } catch (error) {
-      console.error('Failed to create prototype version:', error);
-    }
+    this.version = await this.versionStore.updateOne({
+      evaluationMessage: this.props.messageId,
+    });
+
+    return this.pollStatusCheck();
   };
 
   renderPending() {
     const { t } = this.observedContext;
-    const { versionStore } = this;
+    const loading = this.versionStore.uploading > 0;
 
     return (
       <Button
         variant="contained"
         color="primary"
         size="small"
-        disabled={versionStore.uploading > 0}
+        disabled={loading}
         sx={{ textTransform: 'none' }}
         onClick={this.handleGenerateClick}
       >
-        {versionStore.uploading > 0 ? t('generating') : t('generate_prototype')}
+        {loading ? t('generating') : t('generate_prototype')}
       </Button>
     );
   }
@@ -117,13 +89,13 @@ export class PrototypeGeneratorToolbar extends ObservedComponent<
 
   renderCompleted() {
     const { t } = this.observedContext;
-    const { version } = this;
+    const { previewLink, gitLogsLink } = this.version || {};
 
     return (
       <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-        {version!.previewLink && (
+        {previewLink && (
           <Link
-            href={version!.previewLink}
+            href={previewLink}
             target="_blank"
             rel="noopener noreferrer"
             sx={{
@@ -136,9 +108,9 @@ export class PrototypeGeneratorToolbar extends ObservedComponent<
             {t('view_preview')}
           </Link>
         )}
-        {version!.gitLogsLink && (
+        {gitLogsLink && (
           <Link
-            href={version!.gitLogsLink}
+            href={gitLogsLink}
             target="_blank"
             rel="noopener noreferrer"
             sx={{
@@ -157,16 +129,16 @@ export class PrototypeGeneratorToolbar extends ObservedComponent<
 
   renderFailed() {
     const { t } = this.observedContext;
-    const { version } = this;
+    const { errorMessage, gitLogsLink } = this.version || {};
 
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
         <Typography variant="body2" color="error" sx={{ fontSize: '0.875rem' }}>
-          {version!.errorMessage || t('prototype_generation_failed')}
+          {errorMessage || t('prototype_generation_failed')}
         </Typography>
-        {version!.gitLogsLink && (
+        {gitLogsLink && (
           <Link
-            href={version!.gitLogsLink}
+            href={gitLogsLink}
             target="_blank"
             rel="noopener noreferrer"
             sx={{
@@ -187,14 +159,7 @@ export class PrototypeGeneratorToolbar extends ObservedComponent<
     const { version } = this;
 
     return (
-      <Box
-        sx={{
-          mt: 1.5,
-          pt: 1.5,
-          borderTop: '1px solid',
-          borderColor: 'divider',
-        }}
-      >
+      <Box ref={this.root} sx={{ borderTop: '1px solid', borderColor: 'divider' }}>
         {!version || version.status === 'pending'
           ? this.renderPending()
           : version.status === 'processing'
diff --git a/models/PrototypeVersion.ts b/models/PrototypeVersion.ts
@@ -1,4 +1,4 @@
-import { PrototypeVersion } from '@idea2app/data-server';
+import { PrototypeType, PrototypeVersion } from '@idea2app/data-server';
 import { toggle } from 'mobx-restful';
 
 import { TableModel } from './Base';
@@ -8,9 +8,12 @@ export class PrototypeVersionModel extends TableModel<PrototypeVersion> {
   baseURI = '';
   client = userStore.client;
 
-  constructor(public projectId: number) {
+  constructor(
+    public projectId: number,
+    public type: PrototypeType,
+  ) {
     super();
-    this.baseURI = `project/${projectId}/prototype-version`;
+    this.baseURI = `project/${projectId}/prototype/${type}/version`;
   }
 
   @toggle('downloading')
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@mui/material": "^7.3.4",
     "@mui/material-nextjs": "^7.3.3",
     "@passwordless-id/webauthn": "^2.3.1",
-    "@sentry/nextjs": "^10.20.0",
+    "@sentry/nextjs": "^10.21.0",
     "file-type": "^21.0.0",
     "idb-keyval": "^6.2.2",
     "jsonwebtoken": "^9.0.2",
@@ -30,7 +30,7 @@
     "mobx": "^6.15.0",
     "mobx-github": "^0.6.0",
     "mobx-i18n": "^0.7.2",
-    "mobx-lark": "^2.4.3",
+    "mobx-lark": "^2.5.0",
     "mobx-react": "^9.2.1",
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.4",
@@ -39,17 +39,17 @@
     "next-ssr-middleware": "^1.0.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "web-utility": "^4.6.2",
+    "web-utility": "^4.6.3",
     "webpack": "^5.102.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-typescript": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
-    "@cspell/eslint-plugin": "^9.2.1",
+    "@cspell/eslint-plugin": "^9.2.2",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.38.0",
-    "@idea2app/data-server": "^1.0.0-rc.2",
+    "@idea2app/data-server": "^1.0.0-rc.3",
     "@next/eslint-plugin-next": "^15.5.6",
     "@stylistic/eslint-plugin": "^5.5.0",
     "@tailwindcss/postcss": "^4.1.15",
@@ -59,7 +59,7 @@
     "@types/koa": "^3.0.0",
     "@types/lodash.debounce": "^4.0.9",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.18.11",
+    "@types/node": "^22.18.12",
     "@types/react": "^19.2.2",
     "eslint": "^9.38.0",
     "eslint-config-next": "^15.5.6",
diff --git a/pages/dashboard/project/[id].tsx b/pages/dashboard/project/[id].tsx
@@ -71,7 +71,7 @@ export default class ProjectEvaluationPage extends ObservedComponent<
   };
 
   renderChatMessage = (
-    { id, content, evaluation, createdAt, createdBy }: ConsultMessage,
+    { id, content, evaluation, prototypes, createdAt, createdBy }: ConsultMessage,
     index = 0,
     { length }: ConsultMessage[],
   ) => {
@@ -123,10 +123,12 @@ export default class ProjectEvaluationPage extends ObservedComponent<
               />
             )}
             {evaluation && (
-              <>
-                <EvaluationDisplay {...evaluation} />
-                <PrototypeGeneratorToolbar projectId={this.projectId} messageId={id as number} />
-              </>
+              <EvaluationDisplay
+                {...evaluation}
+                projectId={this.projectId}
+                messageId={id}
+                prototypes={prototypes}
+              />
             )}
             {createdAt && (
               <Typography variant="caption" sx={{ opacity: 0.6, fontSize: '0.75rem' }}>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
