jan/web/screens/Settings/CoreExtensions/index.tsx

// /* eslint-disable @typescript-eslint/no-explicit-any */
// import React, { useState, useEffect, useRef } from 'react'

// import { LlmEngine } from '@janhq/core'
// import { Button, ScrollArea, Badge, Input } from '@janhq/joi'
// import { SearchIcon } from 'lucide-react'

// import Loader from '@/containers/Loader'

// import { formatExtensionsName } from '@/utils/converter'

// import { markdownParser } from '@/utils/markdown-parser'

// import { extensionManager } from '@/extension'
// import Extension from '@/extension/Extension'

// type EngineExtension = {
//   provider: LlmEngine
// } & Extension

// const ExtensionCatalog = () => {
//   const [coreActiveExtensions, setCoreActiveExtensions] = useState<Extension[]>(
//     []
//   )
//   const [engineActiveExtensions, setEngineActiveExtensions] = useState<
//     EngineExtension[]
//   >([])
//   const [searchText, setSearchText] = useState('')
//   const [showLoading, setShowLoading] = useState(false)
//   const fileInputRef = useRef<HTMLInputElement | null>(null)

//   useEffect(() => {
//     const getAllSettings = async () => {
//       const extensionsMenu = []
//       const engineMenu = []
//       const extensions = extensionManager.getAll()

//       for (const extension of extensions) {
//         const settings = await extension.getSettings()
//         if (
//           typeof extension.getSettings === 'function' &&
//           'provider' in extension &&
//           typeof extension.provider === 'string'
//         ) {
//           if (
//             (settings && settings.length > 0) ||
//             (await extension.installationState()) !== 'NotRequired'
//           ) {
//             engineMenu.push({
//               ...extension,
//               provider:
//                 'provider' in extension &&
//                 typeof extension.provider === 'string'
//                   ? extension.provider
//                   : '',
//             })
//           }
//         } else {
//           extensionsMenu.push({
//             ...extension,
//           })
//         }
//       }

//       setCoreActiveExtensions(extensionsMenu)
//       setEngineActiveExtensions(engineMenu as any)
//     }
//     getAllSettings()
//   }, [])

//   /**
//    * Installs a extension by calling the `extensions.install` function with the extension file path.
//    * If the installation is successful, the application is relaunched using the `coreAPI.relaunch` function.
//    * @param e - The event object.
//    */
//   const install = async (e: any) => {
//     e.preventDefault()
//     const extensionFile = e.target.files?.[0].path

//     // Send the filename of the to be installed extension
//     // to the main process for installation
//     const installed = await extensionManager.install([extensionFile])
//     if (installed) window.core?.api?.relaunch()
//   }

//   /**
//    * Uninstalls a extension by calling the `extensions.uninstall` function with the extension name.
//    * If the uninstallation is successful, the application is relaunched using the `coreAPI.relaunch` function.
//    * @param name - The name of the extension to uninstall.
//    */
//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
//   const uninstall = async (name: string) => {
//     // Send the filename of the to be uninstalled extension
//     // to the main process for removal
//     const res = await extensionManager.uninstall([name])
//     if (res) window.core?.api?.relaunch()
//   }

//   /**
//    * Handles the change event of the extension file input element by setting the file name state.
//    * Its to be used to display the extension file name of the selected file.
//    * @param event - The change event object.
//    */
//   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
//     const file = event.target.files?.[0]
//     if (file) {
//       setShowLoading(true)
//       install(event)
//     }
//   }

//   return (
//     <>
//       <ScrollArea className="h-full w-full">
//         <div className="flex w-full flex-col items-start justify-between gap-y-2 p-4 sm:flex-row">
//           <div className="w-full sm:w-[300px]">
//             <Input
//               prefixIcon={<SearchIcon size={16} />}
//               placeholder="Search"
//               onChange={(e) => setSearchText(e.target.value)}
//             />
//           </div>
//           <div>
//             <input
//               type="file"
//               hidden
//               ref={fileInputRef}
//               onChange={handleFileChange}
//             />
//             <Button onClick={() => fileInputRef.current?.click()}>
//               Install Extension
//             </Button>
//           </div>
//         </div>

//         <div className="block w-full px-4">
//           {engineActiveExtensions.length !== 0 && (
//             <div className="mb-3 mt-4 border-b border-[hsla(var(--app-border))] pb-4">
//               <h6 className="text-base font-semibold text-[hsla(var(--text-primary))]">
//                 Model Providers
//               </h6>
//             </div>
//           )}
//           {engineActiveExtensions
//             .filter((x) => x.name.includes(searchText.toLowerCase().trim()))
//             .sort((a, b) => a.provider.localeCompare(b.provider))
//             .map((item, i) => {
//               return (
//                 <div
//                   key={i}
//                   className="flex w-full flex-col items-start justify-between py-3 sm:flex-row"
//                 >
//                   <div className="w-full flex-shrink-0 space-y-1.5">
//                     <div className="flex items-center justify-between gap-x-2">
//                       <div className="flex items-center gap-x-2">
//                         <h6 className="line-clamp-1 font-semibold">
//                           {item.productName?.replace('Inference Engine', '') ??
//                             formatExtensionsName(item.name)}
//                         </h6>
//                         <Badge variant="outline" theme="secondary">
//                           v{item.version}
//                         </Badge>
//                         <p>{item.provider}</p>
//                       </div>
//                       <div className="flex items-center gap-x-2">
//                         {/* {!inActiveEngineProvider.includes(item.provider) && (
//                           <SetupRemoteModel engine={item.provider} />
//                         )} */}
//                         {/* <Switch
//                           checked={
//                             !inActiveEngineProvider.includes(item.provider)
//                           }
//                           onChange={() => onSwitchChange(item.provider)}
//                         /> */}
//                       </div>
//                     </div>
//                     {
//                       <div
//                         className="w-full font-medium leading-relaxed text-[hsla(var(--text-secondary))] sm:w-4/5"
//                         dangerouslySetInnerHTML={{
//                           __html: markdownParser.parse(item.description ?? '', {
//                             async: false,
//                           }),
//                         }}
//                       />
//                     }
//                   </div>
//                 </div>
//               )
//             })}

// //           {coreActiveExtensions.length > 0 && (
// //             <div className="mb-3 mt-8 border-b border-[hsla(var(--app-border))] pb-4">
// //               <h6 className="text-base font-semibold text-[hsla(var(--text-primary))]">
// //                 Core Extention
// //               </h6>
// //             </div>
// //           )}
// //           {coreActiveExtensions
// //             .filter((x) => x.name.includes(searchText.toLowerCase().trim()))
// //             .sort((a, b) => a.name.localeCompare(b.name))
// //             .map((item, i) => {
// //               return (
// //                 <div
// //                   key={i}
// //                   className="flex w-full flex-col items-start justify-between py-3 sm:flex-row"
// //                 >
// //                   <div className="w-full flex-shrink-0 space-y-1.5">
// //                     <div className="flex items-center gap-x-2">
// //                       <h6 className="line-clamp-1 font-semibold">
// //                         {item.productName ?? formatExtensionsName(item.name)}
// //                       </h6>
// //                       <Badge variant="outline" theme="secondary">
// //                         v{item.version}
// //                       </Badge>
// //                     </div>
// //                     {
// //                       <div
// //                         className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
// //                         dangerouslySetInnerHTML={{
// //                           __html: markdownParser.parse(item.description ?? '', {
// //                             async: false,
// //                           }),
// //                         }}
// //                       />
// //                     }
// //                   </div>
// //                 </div>
// //               )
// //             })}
// //         </div>
// //       </ScrollArea>
// //       {showLoading && <Loader description="Installing..." />}
// //     </>
// //   )
// // }

// // export default ExtensionCatalog