fix: failed to bind port - nitro error message copy (#2101)

* fix: failed to bind port - nitro error message copy

* fix: copy

extensions/inference-nitro-extension/src/index.ts

@@ -154,7 +154,10 @@ export default class JanInferenceNitroExtension extends InferenceExtension {
     })
 
     if (nitroInitResult?.error) {
-      events.emit(ModelEvent.OnModelFail, model)
+      events.emit(ModelEvent.OnModelFail, {
+        ...model,
+        error: nitroInitResult.error,
+      })
       return
     }
 

extensions/inference-nitro-extension/src/node/index.ts

@@ -310,9 +310,15 @@ async function killSubprocess(): Promise<void> {
       subprocess?.kill()
       subprocess = undefined
     })
-    .catch(() => {})
+    .catch(() => {}) // Do nothing with this attempt
     .then(() => tcpPortUsed.waitUntilFree(PORT, 300, 5000))
     .then(() => log(`[NITRO]::Debug: Nitro process is terminated`))
+    .catch((err) => {
+      log(
+        `[NITRO]::Debug: Could not kill running process on port ${PORT}. Might be another process running on the same port? ${err}`
+      )
+      throw 'PORT_NOT_AVAILABLE'
+    })
 }
 
 /**

web/containers/Providers/EventHandler.tsx

@@ -114,8 +114,8 @@ export default function EventHandler({ children }: { children: ReactNode }) {
 
   const onModelInitFailed = useCallback(
     (res: any) => {
-      const errorMessage = `${res.error}`
+      const errorMessage = res?.error ?? res
-      console.error('Failed to load model: ' + errorMessage)
+      console.error('Failed to load model: ', errorMessage)
       setStateModel(() => ({
         state: 'start',
         loading: false,

web/screens/Chat/ErrorMessage/index.tsx

@@ -7,6 +7,7 @@ import ModalTroubleShooting, {
   modalTroubleShootingAtom,
 } from '@/containers/ModalTroubleShoot'
 
+import { loadModelErrorAtom } from '@/hooks/useActiveModel'
 import useSendChatMessage from '@/hooks/useSendChatMessage'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
@@ -15,6 +16,8 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const { resendChatMessage } = useSendChatMessage()
   const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
+  const loadModelError = useAtomValue(loadModelErrorAtom)
+  const PORT_NOT_AVAILABLE = 'PORT_NOT_AVAILABLE'
 
   const regenerateMessage = async () => {
     const lastMessageIndex = messages.length - 1
@@ -23,9 +26,9 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   }
 
   return (
-    <>
+    <div className="mt-10">
       {message.status === MessageStatus.Stopped && (
-        <div key={message.id} className="mt-10 flex flex-col items-center">
+        <div key={message.id} className="flex flex-col items-center">
           <span className="mb-3 text-center text-sm font-medium text-gray-500">
             Oops! The generation was interrupted. Let&apos;s give it another go!
           </span>
@@ -41,25 +44,47 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
         </div>
       )}
       {message.status === MessageStatus.Error && (
-        <div
+        <>
-          key={message.id}
+          {loadModelError === PORT_NOT_AVAILABLE ? (
-          className="flex flex-col items-center text-center text-sm font-medium text-gray-500"
+            <div
-        >
+              key={message.id}
-          <p>{`Apologies, something’s amiss!`}</p>
+              className="flex flex-col items-center text-center text-sm font-medium text-gray-500 w-full"
-          <p>
-            Jan’s in beta. Access&nbsp;
-            <span
-              className="cursor-pointer text-primary dark:text-blue-400"
-              onClick={() => setModalTroubleShooting(true)}
             >
-              troubleshooting assistance
+              <p className="w-[90%]">
-            </span>
+                Port 3928 is currently unavailable. Check for conflicting apps,
-            &nbsp;now.
+                or access&nbsp;
-          </p>
+                <span
-          <ModalTroubleShooting />
+                  className="cursor-pointer text-primary dark:text-blue-400"
-        </div>
+                  onClick={() => setModalTroubleShooting(true)}
+                >
+                  troubleshooting assistance
+                </span>
+                &nbsp;for further support.
+              </p>
+              <ModalTroubleShooting />
+            </div>
+          ) : (
+            <div
+              key={message.id}
+              className="flex flex-col items-center text-center text-sm font-medium text-gray-500"
+            >
+              <p>{`Apologies, something’s amiss!`}</p>
+              <p>
+                Jan’s in beta. Access&nbsp;
+                <span
+                  className="cursor-pointer text-primary dark:text-blue-400"
+                  onClick={() => setModalTroubleShooting(true)}
+                >
+                  troubleshooting assistance
+                </span>
+                &nbsp;now.
+              </p>
+              <ModalTroubleShooting />
+            </div>
+          )}
+        </>
       )}
-    </>
+    </div>
   )
 }
 export default ErrorMessage