fix: #995 - Fix onboarding state and model sorting (#1009)

* fix: #995 - Fix onboarding state and model sorting

* fix: typo

Author: louis-jan

core/src/types/model/modelEntity.ts

@@ -14,7 +14,7 @@ export type ModelInfo = {
  * @stored
  */
 
-enum InferenceEngine {
+export enum InferenceEngine {
   nitro = 'nitro',
   openai = 'openai',
   triton_trtllm = 'triton_trtllm',

web/containers/DropdownListSidebar/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { Model } from '@janhq/core'
+import { InferenceEngine, Model } from '@janhq/core'
 import {
   Button,
   Select,
@@ -41,7 +41,14 @@ export default function DropdownListSidebar() {
 
   useEffect(() => {
     getDownloadedModels().then((downloadedModels) => {
-      setDownloadedModels(downloadedModels)
+      setDownloadedModels(
+        downloadedModels.sort((a, b) =>
+          a.engine !== InferenceEngine.nitro &&
+          b.engine === InferenceEngine.nitro
+            ? 1
+            : -1
+        )
+      )
       if (downloadedModels.length > 0) {
         setSelected(
           downloadedModels.filter(

web/screens/Chat/ChatBody/index.tsx

@@ -2,6 +2,7 @@ import { Fragment } from 'react'
 
 import ScrollToBottom from 'react-scroll-to-bottom'
 
+import { InferenceEngine } from '@janhq/core'
 import { Button } from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
 
@@ -41,6 +42,10 @@ const ChatBody: React.FC = () => {
       </div>
     )
 
+  const showOnboardingStep =
+    downloadedModels.filter((e) => e.engine === InferenceEngine.nitro)
+      .length === 0
+
   return (
     <Fragment>
       {messages.length === 0 ? (
@@ -50,7 +55,24 @@ const ChatBody: React.FC = () => {
             width={56}
             height={56}
           />
-          <p className="mt-1 text-base font-medium">How can I help you?</p>
+          {showOnboardingStep ? (
+            <>
+              <p className="mt-1 text-base font-medium">
+                {`You don't have a local model yet.`}
+              </p>
+              <div className="w-auto px-4 py-2">
+                <Button
+                  block
+                  className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
+                  onClick={() => setMainViewState(MainViewState.Hub)}
+                >
+                  Explore The Hub
+                </Button>
+              </div>
+            </>
+          ) : (
+            <p className="mt-1 text-base font-medium">How can I help you?</p>
+          )}
         </div>
       ) : (
         <ScrollToBottom className="flex h-full w-full flex-col">