feat: disabled remote model and show prompt users to use on-device models when offline mode

[urmauur]

Describe Your Changes

The changes made in the code are as follows:

1. Test Modifications (index.test.ts):

   • Added a test case to check if useOnlineStatus is defined and exported correctly from the components.

2. Module Export Update (index.ts):

   • Added useOnlineStatus to the list of exported hooks from the module.

3. Component Update (ModelDropdown/index.tsx):

   • Imported the useOnlineStatus hook from the @janhq/joi library.
   • Imported the WifiOff icon from the lucide-react library.
   • Utilized the useOnlineStatus hook to check the online status (isOnline) within the ModelDropdown component.
   • Adjusted CSS classes for list items to also disable them if the application is offline unless they are local engines.
   • Added a new UI element that displays at the bottom of the list when the user is offline and the searchFilter is set to 'remote'. It includes the WifiOff icon and a message informing the user that they are offline and should use on-device models.

Screenshots

Screen.Recording.2024-12-05.at.13.11.16.mov

Fixes Issues

• Closes enhancement: Better error handing for remote models when there's no internet connection #4142
• Closes #

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

[github-actions]

Barecheck - Code coverage report

Total: 69.38%

Your code coverage diff: 0.08% ▴

Uncovered files and lines

File	Lines
web/containers/ModelDropdown/index.tsx	106, 117, 127-128, 131, 133-134, 136-137, 139-142, 144, 152, 169-171, 173, 175, 194, 198, 203, 210, 213-214, 249-251, 255, 279-281, 283, 287, 290-295, 302-303, 314, 336, 352, 373, 382, 388, 396-397, 400-405, 408, 411, 463-464, 466, 492, 500, 502, 527, 532-533, 535, 539-541, 543-544, 546, 557, 561-563, 591, 599, 601

[louis-jan]

To investigate more

[urmauur]

closed PR since ticket change