webui build

frontend/src/components/DialogButton.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import React, { FC, ReactElement } from 'react';
 import {
   Button,
   Dialog,
@@ -11,7 +11,9 @@ import {
 } from '@fluentui/react-components';
 import { ToolTipButton } from './ToolTipButton';
 import { useTranslation } from 'react-i18next';
-import MarkdownRender from './MarkdownRender';
+import { LazyImportComponent } from './LazyImportComponent';
+
+const MarkdownRender = React.lazy(() => import('./MarkdownRender'));
 
 export const DialogButton: FC<{
   text?: string | null
@@ -45,7 +47,9 @@ export const DialogButton: FC<{
         <DialogContent>
           {
             markdown ?
-              <MarkdownRender>{contentText}</MarkdownRender> :
+              <LazyImportComponent lazyChildren={MarkdownRender}>
+                {contentText}
+              </LazyImportComponent> :
               contentText
           }
         </DialogContent>

frontend/src/components/LazyImportComponent.tsx

@@ -0,0 +1,20 @@
+import { FC, LazyExoticComponent, ReactNode, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface LazyImportComponentProps {
+  lazyChildren: LazyExoticComponent<FC<any>>;
+  lazyProps?: any;
+  children?: ReactNode;
+}
+
+export const LazyImportComponent: FC<LazyImportComponentProps> = (props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Suspense fallback={<div>{t('Loading...')}</div>}>
+      <props.lazyChildren {...props.lazyProps}>
+        {props.children}
+      </props.lazyChildren>
+    </Suspense>
+  );
+};

frontend/src/components/MarkdownRender.tsx

@@ -21,7 +21,7 @@ const Hyperlink: FC<any> = ({ href, children }) => {
   );
 };
 
-export const MarkdownRender: FC<ReactMarkdownOptions> = (props) => {
+const MarkdownRender: FC<ReactMarkdownOptions> = (props) => {
   return (
     <div dir="auto" className="markdown-body">
       <ReactMarkdown

frontend/src/components/RunButton.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { ToolTipButton } from './ToolTipButton';
 import { Play16Regular, Stop16Regular } from '@fluentui/react-icons';
 import { useNavigate } from 'react-router';
-import { WindowShow } from '../../wailsjs/runtime/runtime';
+import { WindowShow } from '../../wailsjs/runtime';
 
 const mainButtonText = {
   [ModelStatus.Offline]: 'Run',

frontend/src/components/WorkHeader.tsx

@@ -25,7 +25,8 @@ export const WorkHeader: FC = observer(() => {
   const { t } = useTranslation();
   const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
 
-  return (
+  return commonStore.platform === 'web' ?
+    <div /> :
     <div className="flex flex-col gap-1">
       <div className="flex justify-between items-center">
         <div className="flex items-center gap-2">
@@ -42,5 +43,5 @@ export const WorkHeader: FC = observer(() => {
       </Text>
       <Divider style={{ flexGrow: 0 }} />
     </div>
-  );
+    ;
 });