Show forum link when error is encountered. (#192)

* Add forum link to error.

* Prettier.

package.json

@@ -85,6 +85,8 @@
     "electron-log": "^5.2.0",
     "electron-store": "8.2.0",
     "jest": "^29.7.0",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "systeminformation": "^5.23.5",

src/constants.ts

@@ -24,10 +24,11 @@ export const IPC_CHANNELS = {
   OPEN_PATH: 'open-path',
   OPEN_LOGS_PATH: 'open-logs-path',
   OPEN_DEV_TOOLS: 'open-dev-tools',
+  OPEN_FORUM: 'open-forum',
 } as const;
 
 export const COMFY_ERROR_MESSAGE =
-  'Was not able to start ComfyUI. Please check the logs for more details. You can open it from the tray icon.';
+  'Was not able to start ComfyUI. Please check the logs for more details. You can open it from the Help menu. Please report issues to: https://forum.comfy.org';
 
 export const COMFY_FINISHING_MESSAGE = 'Finishing...';
 

src/main.ts

@@ -188,6 +188,10 @@ if (!gotTheLock) {
           }
         }
       });
+      ipcMain.handle(IPC_CHANNELS.OPEN_FORUM, () => {
+        shell.openExternal('https://forum.comfy.org');
+      });
+
       ipcMain.handle(IPC_CHANNELS.OPEN_DIALOG, (event, options: Electron.OpenDialogOptions) => {
         log.info('Open dialog');
         return dialog.showOpenDialogSync({
@@ -204,6 +208,7 @@ if (!gotTheLock) {
         return modelConfigPath;
       });
       ipcMain.on(IPC_CHANNELS.OPEN_PATH, (event, folderPath: string) => {
+        log.info(`Opening path: ${folderPath}`);
         shell.openPath(folderPath);
       });
       ipcMain.on(IPC_CHANNELS.OPEN_DEV_TOOLS, () => {

src/preload.ts

@@ -87,6 +87,9 @@ const electronAPI = {
     const modelConfigPath = await electronAPI.getModelConfigPath();
     ipcRenderer.send(IPC_CHANNELS.OPEN_PATH, modelConfigPath);
   },
+  openForum: () => {
+    ipcRenderer.invoke(IPC_CHANNELS.OPEN_FORUM);
+  },
   /**
    * Open the developer tools window.
    */

src/renderer/index.tsx

@@ -30,6 +30,7 @@ const Home: React.FC = () => {
   const [status, setStatus] = useState('Starting...');
   const [logs, setLogs] = useState<string[]>([]);
   const [defaultInstallLocation, setDefaultInstallLocation] = useState<string>('');
+  const electronAPI: ElectronAPI = (window as any)[ELECTRON_BRIDGE_API];
 
   const updateProgress = useCallback(({ status: newStatus }: ProgressUpdate) => {
     log.info(`Setting new status: ${newStatus}`);
@@ -59,28 +60,19 @@ const Home: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    const electronAPI: ElectronAPI = (window as any)[ELECTRON_BRIDGE_API];
-
     electronAPI.onProgressUpdate(updateProgress);
-
     electronAPI.onLogMessage((message: string) => {
       log.info(`Received log message: ${message}`);
       addLogMessage(message);
     });
   }, [updateProgress, addLogMessage]);
 
   useEffect(() => {
-    const electronAPI: ElectronAPI = (window as any)[ELECTRON_BRIDGE_API];
-
     electronAPI.onDefaultInstallLocation((location: string) => {
       setDefaultInstallLocation(location);
     });
   }, []);
 
-  if (showSetup === null) {
-    return <> Loading ....</>;
-  }
-
   if (showSetup) {
     return (
       <div style={bodyStyle}>
@@ -91,7 +83,7 @@ const Home: React.FC = () => {
 
   return (
     <div style={bodyStyle}>
-      <ProgressOverlay status={status} logs={logs} />
+      <ProgressOverlay status={status} logs={logs} openForum={() => electronAPI.openForum()} />
     </div>
   );
 };

src/renderer/screens/ProgressOverlay.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { COMFY_ERROR_MESSAGE, COMFY_FINISHING_MESSAGE } from 'src/constants';
 import AnimatedLogDisplay from './AnimatedLogDisplay';
+import Linkify from 'linkify-react';
 
 const loadingTextStyle: React.CSSProperties = {
   marginBottom: '20px',
@@ -45,14 +46,40 @@ const logContainerStyle: React.CSSProperties = {
 interface ProgressOverlayProps {
   status: string;
   logs: string[];
+  openForum: () => void;
 }
 
-const ProgressOverlay: React.FC<ProgressOverlayProps> = ({ status, logs }) => {
+const linkStyle: React.CSSProperties = {
+  color: '#3391ff', // Bright blue that works well on dark background
+  textDecoration: 'underline',
+  cursor: 'pointer',
+};
+
+const ProgressOverlay: React.FC<ProgressOverlayProps> = ({ status, logs, openForum }) => {
+  const linkOptions = {
+    render: ({ attributes, content }: { attributes: any; content: string }) => {
+      const { href, ...props } = attributes;
+      return (
+        <a
+          {...props}
+          href={href}
+          style={linkStyle}
+          onClick={(e) => {
+            e.preventDefault();
+            openForum();
+          }}
+        >
+          {content}
+        </a>
+      );
+    },
+  };
+
   return (
     <div style={outerContainerStyle}>
       <div style={containerStyle}>
         <div style={loadingTextStyle} id="loading-text">
-          {status}
+          <Linkify options={linkOptions}>{status}</Linkify>
         </div>
         <div style={logContainerStyle}>
           {status !== COMFY_FINISHING_MESSAGE && status !== COMFY_ERROR_MESSAGE && <AnimatedLogDisplay logs={logs} />}

yarn.lock

@@ -4868,6 +4868,8 @@ __metadata:
     eslint-plugin-import: "npm:^2.25.0"
     husky: "npm:^9.1.6"
     jest: "npm:^29.7.0"
+    linkify-react: "npm:^4.1.3"
+    linkifyjs: "npm:^4.1.3"
     lint-staged: "npm:^15.2.10"
     prettier: "npm:^3.3.3"
     react: "npm:^18.3.1"
@@ -8618,6 +8620,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkify-react@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "linkify-react@npm:4.1.3"
+  peerDependencies:
+    linkifyjs: ^4.0.0
+    react: ">= 15.0.0"
+  checksum: 10c0/c8c0e96301c3fbe5df19110dd778f4f0004f7c2f127fecb192ba9d4cf3e581d59f7d99ab0311c72a99cf039f5b34421e6ce71f2fcdd90f51655d7736fed4b370
+  languageName: node
+  linkType: hard
+
+"linkifyjs@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "linkifyjs@npm:4.1.3"
+  checksum: 10c0/9fb71da06ee710b5587c8b61ff9a0e45303d448f61fab135e44652cff95c09c1abe276158a72384cff6f35a2371d1cec33dfaa7e5280b71dbb142b43d210c75a
+  languageName: node
+  linkType: hard
+
 "lint-staged@npm:^15.2.10":
   version: 15.2.10
   resolution: "lint-staged@npm:15.2.10"